<template xmlns="http://www.w3.org/1999/html">
    <div class="app-container">
        <!-- 左边 -->
        <div class="left">
            <div class="put">
                <el-input placeholder="请输入机器人名称" v-model="robot_name" @change="getRobotName($event)"
                    prefix-icon="el-icon-search" clearable></el-input>
            </div>
            <div class="table">
                <el-table :data="robotList" @row-click="handleSelectionChange" height="100%"
                    :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                    :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
                    :row-style="{ height: '40px', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
                    :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
                    <el-table-column prop="robot_type" label="类型" width="100px">
                        <template slot-scope="scope">
                            <div v-if="scope.row.robot_type === 0" style="color:#fff;">普通</div>
                            <div v-if="scope.row.robot_type === 1" style="color:#5bbefc;">救援</div>
                            <div v-if="scope.row.robot_type === 2" style="color:#d0a707;">防爆</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="robot_name" label="名称" width="90px">
                    </el-table-column>
                    <el-table-column prop="robot_state" label="状态" width="70px">
                        <template slot-scope="scope">
                            <i class="el-icon-error" v-if="scope.row.robot_state === 0"
                                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
                            <i class="el-icon-success" v-if="scope.row.robot_state === 1"
                                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="table-bottom">
                <el-table :data="plcList" height="100%" :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                    :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
                    :row-style="{ height: '30px', background: '#000224', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
                    :cell-style="{ 'padding-right': '25px', width: '100%', 'text-align': 'left' }">
                    <el-table-column prop="plc_name" label="PLC柜名称" width="100px">
                    </el-table-column>
                    <el-table-column prop="plc_num" label="PLC柜号" width="90px">
                        <template slot-scope="scope">
                            <div
                                style="font-size: 12px;display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;">
                                <div v-if="scope.$index + 1 == 1"
                                    style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#a64317; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <div v-if="scope.$index + 1 == 2"
                                    style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#a67c17; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <div v-if="scope.$index + 1 == 3"
                                    style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#9aa617; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <div v-if="scope.$index + 1 >= 4"
                                    style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#64a617; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="plc_state" label="状态" width="70px">
                        <template slot-scope="scope">
                            <i class="el-icon-error" v-if="scope.row.plc_state === 0"
                                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
                            <i class="el-icon-success" v-if="scope.row.plc_state === 1"
                                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="table-bottom">
                <el-table :data="onlineList" height="100%" :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                    :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
                    :row-style="{ height: '30px', background: '#000224', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
                    :cell-style="{ 'padding-right': '25px', width: '100%', 'text-align': 'left' }">
                    <el-table-column prop="cameraName" label="摄像头名称" width="190px">
                    </el-table-column>
                    <el-table-column prop="loginValue" label="状态" width="70px">
                        <template slot-scope="scope">
                            <i class="el-icon-error" v-if="scope.row.loginValue === 0"
                                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
                            <i class="el-icon-success" v-if="scope.row.loginValue != 0"
                                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 中间 -->
        <div class="video-center">
            <div>
                <p id="robotitle" style="font-size:18px;color: #e7e7ea;letter-spacing:1px;"></p>
            </div>
            <div class="center-box1">
                <!-- 转速盘 -->
                <div class="Speed-dial">
                    <div id="gauges2" ref="gauges2" style="width:29%;height:150px; margin-top:7%"></div>
                    <div id="gauges" ref="gauges" style="width:45%;height:170px;margin-left:-8px;margin-top:1%"></div>
                    <div id="gauges3" ref="gauges3" style="width: 26%;height:150px;margin-right:3px;margin-top:7%"></div>
                </div>
                <div class="right-mode1">
                    <div class="mode-box">
                        <p>现场温度</p>
                        <p>{{ xcwd }}</p>
                    </div>
                    <div class="mode-box">
                        <p>现场湿度</p>
                        <p>{{ xcsd }}</p>
                    </div>
                    <div class="mode-box">
                        <p>模式</p>
                        <p>{{ jqrms }}</p>
                    </div>
                    <div class="mode-box">
                        <p>方向</p>
                        <p>{{ jqrfx }}</p>
                    </div>
                    <div class="mode-box">
                        <p>电池电压</p>
                        <p>{{ dcdy }}</p>
                    </div>
                </div>
                <div class="right-mode2">
                    <div class="mode-box">
                        <p>栅格数</p>
                        <p>{{ gswl }}</p>
                    </div>
                    <div class="mode-box">
                        <p>栅格孔数</p>
                        <p>{{ jcgssl }}</p>
                    </div>
                    <div class="mode-box">
                        <p>速度设定</p>
                        <p>{{ jqrsd }}</p>
                    </div>
                    <div class="mode-box">
                        <p>实时位移</p>
                        <p>{{ sswy }}</p>
                    </div>
                    <div class="mode-box">
                        <p>电池状态</p>
                        <p>{{ dczt }}</p>
                    </div>
                </div>

                <div style="margin-left:14px;">
                    <img src="../../components/images/line1.png" alt="">
                </div>

                <div class="Mode-selection">
                    <p>模式选择</p>
                </div>

                <!-- 五个按钮 -->
                <div class="Operation-button" id="#btn">
                    <div class="Operation-buttonBox" @click="jqrmsF('1')">
                        <el-button size="mini" circle @click="selectedTab = 0"></el-button>
                        <p>手动模式</p>
                    </div>
                    <div class="Operation-buttonBox" @click="jqrmsF('2')">
                        <el-button @click="selectedTab = 1" size="mini" circle
                            style="
                                                                            background: linear-gradient(227deg, #0F947C, #10DAB2);">
                        </el-button>
                        <p>自动模式</p>
                    </div>
                    <div class="Operation-buttonBox" @click="jqrzymsF('3')">
                        <el-button @click="selectedTab = 2" size="mini" circle
                            style="
                                                                            background: linear-gradient(227deg, #337F17, #3CA813);">
                        </el-button>
                        <p>一键返航</p>
                    </div>
                    <div class="Operation-buttonBox" @click="jqrzymsF('0')" style="display: none;" id="zymsid">
                        <el-button @click="selectedTab = 3" size="mini" circle
                            style="
                                                                            background: linear-gradient(227deg, #C45016, #F58614);">
                        </el-button>
                        <p>自由</p>
                    </div>
                    <div class="Operation-buttonBox" @click="zt()">
                        <el-button size="mini" circle style="
                      background: linear-gradient(227deg, #B72517, #EA392D);">
                        </el-button>
                        <p>暂停</p>
                    </div>
                </div>
            </div>
            <!-- 手动模式 -->
            <div class="center-box2-1" v-if="selectedTab === 0">
                <div class="right-bottomTitle">
                    <p>手动模式</p>
                    <span></span>
                </div>
                <div class="right-bottomBox">
                    <div class="right-bottomBox1">
                        <div class="right-bottomBox1-1">
                            <p contenteditable="true" id="mbwzid">20</p>
                            <span>m</span>
                            <el-button class="btn" size="default" @click="mbwz()">目标位置</el-button>
                        </div>
                        <div class="right-bottomBox1-2">
                            <el-dropdown @command="sdmslb">
                                <el-button type="primary" size="min" style="width: 80px;
                                                                                                    height: 25px;background: #0F1A43 !important;
                                                                                                    display: flex;
                                                                                                    justify-content: space-around;
                                                                                                    align-items: center;
                                                                                                    border: 2px solid #54619D;
                                                                                                    border-radius: 10px;
                                                                                                    font-size: 12px;
                                                                                                    font-family: Bahnschrift;
                                                                                                    font-weight: 400;
                                                                                                    color: #C1C1C1;">
                                    {{ sdmssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="0">0</el-dropdown-item>
                                    <el-dropdown-item command="1000">1000</el-dropdown-item>
                                    <el-dropdown-item command="2000">2000</el-dropdown-item>
                                    <el-dropdown-item command="3000">3000</el-dropdown-item>
                                    <el-dropdown-item command="4000">4000</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <span>r/min</span>
                            <el-button class="btn" size="default" @click="sdmsdsd()">速度设定</el-button>
                        </div>
                    </div>
                    <div class="right-bottomBox1-3" v-if="showButtons">
                        <div class="right-bottomBox1-3-1">
                            <el-button class="btn1" size="default" @click="fg()">放钩</el-button>
                            <el-button class="btn2" size="default" @click="sg()">收钩</el-button>
                        </div>
                    </div>
                    <div class="right-bottomBox1-4">
                        <div class="right-bottomBox1-4-1">
                            <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
                            <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
                            <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 自动模式 -->
            <div class="center-box2-2" v-if="selectedTab === 1">
                <div class="right-bottomTitle">
                    <p>自动模式</p>
                    <span></span>
                </div>
                <div class="right-bottomBox1">
                    <el-dropdown @command="zdmslb">
                        <el-button type="primary" size="min" style="width: 80px;
                                                                                              height: 25px;background: #0F1A43 !important;
                                                                                              display: flex;
                                                                                              justify-content: space-around;
                                                                                              align-items: center;
                                                                                              border: 2px solid #54619D;
                                                                                              border-radius: 10px;
                                                                                              font-size: 12px;
                                                                                              font-family: Bahnschrift;
                                                                                              font-weight: 400;
                                                                                              color: #C1C1C1;">
                            {{ zdmssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="0">0</el-dropdown-item>
                            <el-dropdown-item command="1000">1000</el-dropdown-item>
                            <el-dropdown-item command="2000">2000</el-dropdown-item>
                            <el-dropdown-item command="3000">3000</el-dropdown-item>
                            <el-dropdown-item command="4000">4000</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>r/min</span>
                    <el-button class="btn" size="default" @click="zdmsdsd()">速度设定</el-button>
                </div>
                <div class="right-bottomBox2">
                    <el-button class="btn1" size="default" @click="zdmsqd()">启动</el-button>
                    <el-button class="btn2" size="default" @click="dd()">定点</el-button>
                    <el-button class="btn3" size="default" @click="lx()">连续</el-button>
                </div>
            </div>
            <!-- 一键返航 -->
            <div class="center-box2-3" v-if="selectedTab === 2">
                <div class="right-bottomTitle">
                    <p>一键返航</p>
                    <span></span>
                </div>
                <div class="right-bottomBox">
                    <div class="right-bottomBox1" v-if="showButtons">
                        <el-button class="btn1" size="default" @click="fg()">放钩</el-button>
                        <el-button class="btn2" size="default" @click="sg()">收钩</el-button>
                    </div>
                    <div class="right-bottomBox2">
                        <el-button class="btn" size="default" @click="yjfh()">返航</el-button>
                    </div>
                </div>
            </div>
            <!-- 自由模式 -->
            <div class="center-box2-4" v-if="selectedTab === 3">
                <div class="right-bottomTitle">
                    <p>自由模式</p>
                    <span></span>
                </div>
                <div class="right-bottomBox">
                    <div class="right-bottomBox1">
                        <el-dropdown @command="zymslb">
                            <el-button type="primary" size="min" style="width: 80px;
                                                                                                height: 25px;background: #0F1A43 !important;
                                                                                                display: flex;
                                                                                                justify-content: space-around;
                                                                                                align-items: center;
                                                                                                border: 2px solid #54619D;
                                                                                                border-radius: 10px;
                                                                                                font-size: 12px;
                                                                                                font-family: Bahnschrift;
                                                                                                font-weight: 400;
                                                                                                color: #C1C1C1;">
                                {{ zymssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="0">0</el-dropdown-item>
                                <el-dropdown-item command="1000">1000</el-dropdown-item>
                                <el-dropdown-item command="2000">2000</el-dropdown-item>
                                <el-dropdown-item command="3000">3000</el-dropdown-item>
                                <el-dropdown-item command="4000">4000</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span>r/min</span>
                        <el-button class="btn" size="default" @click="zymsdsd()">速度设定</el-button>
                    </div>
                    <div class="right-bottomBox2" v-if="showButtons">
                        <el-button class="btn1" size="default" @click="fg()">放钩</el-button>
                        <el-button class="btn2" size="default" @click="sg()">收钩</el-button>
                    </div>
                    <div class="right-bottomBox3">
                        <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
                        <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
                        <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
                    </div>
                </div>

            </div>
        </div>

        <!-- 右边 -->
        <div class="video-right">
            <div> <!--<div class="right-header">-->
                <p style="font-size:18px;color: #e7e7ea;letter-spacing:1px;">视频控制</p>
            </div>
            <!-- 大华摄像头 -->
            <div class="videoBox" v-show="this.camera_type == 0 || this.camera_type == null">
                <div class="videobox1">
                    <div class="box" :class="{ active: activeBox === 1 }" @click=" activeBox = 1; Qyt = true; Hyt = false">
                        <video v-show="videoShowQ" id="DHQvideo" style="width:100%;height:99%" class="video-js" controls
                            autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                            controlslist="nodownload"></video>
                    </div>
                    <div class="box" :class="{ active: activeBox === 2 }" @click=" activeBox = 2; Qyt = false; Hyt = true">
                        <video v-show="videoShowH" id="DHHvideo" class="video-js" style="width:100%;height:99%" controls
                            autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                            controlslist="nodownload"></video>
                    </div>
                </div>
                <div class="videobox2">
                    <div class="videobox2-1">
                        <p>音视频控制</p>
                        <span></span>
                    </div>
                    <div class="videobox2-2">
                        <div class="videobox2-2-1">
                            <el-dropdown @command="sxtxz">
                                <el-button type="primary" size="min" style="width: 90px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                                    {{ sxtjs }}<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="前摄校时" @click.native="Qtiming">前摄校时</el-dropdown-item>
                                    <el-dropdown-item command="后摄校时" @click.native="Htiming">后摄校时</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <p contenteditable="true" id="sy"></p>
                        </div>

                        <div class="videobox2-2-3">
                            <el-button class="btn1" size="default" @click="Qwatermark">前像头水印</el-button>
                            <el-button class="btn2" size="default" @click="Hwatermark">后像头水印</el-button>
                        </div>
                        <div class="videobox2-2-4">
                            <el-button class="btn" @click="QstartVideo" size="mini">前像头录像</el-button>
                            <el-button class="btn" @click="HstartVideo" size="mini">后像头录像</el-button>
                        </div>
                        <div class="videobox2-2-5">
                            <el-button class="btn" @click="QendVideo" size="mini">前像头停止录制</el-button>
                            <el-button class="btn" @click="HendVideo" size="mini">后像头停止录制</el-button>
                        </div>
                    </div>
                </div>
                <img src="../../components/images/line.png" alt="">
                <div class="videobox3">
                    <div class="videobox3-1">
                        <p>云台</p>
                        <span></span>
                    </div>
                    <div class="videobox3-2" v-show="Qyt">
                        <!-- 八角云盘 -->
                        <div class="ptz">
                            <!-- /* 外圆环 */ -->
                            <div id="round"></div>
                            <!-- /* 黑色内圆环 */ -->
                            <div id="center_black"></div>
                            <div id="center_blue" @click="Qpicture">
                                <span>抓图</span>
                            </div>
                            <div id="circle0">
                                <div id="left">
                                    <div class="circle-left" id="circle2" @click="startQUpRunning"
                                        @mousedown="startQUpRunning1" @mouseup="stopQUpRunning1">
                                        <span>上</span>
                                    </div>
                                    <div class="circle-left" id="circle3" @click="startQRUpRunning"
                                        @mousedown="startQRUpRunning1" @mouseup="stopQRUpRunning1">
                                        <span>右上</span>
                                    </div>
                                    <div class="circle-left" id="circle4" @click="startQRighttRunning"
                                        @mousedown="startQRighttRunning1" @mouseup="stopQRightRunning1">
                                        <span>右</span>
                                    </div>
                                    <div class="circle-left" id="circle5" @click="startQRDwnRunning"
                                        @mousedown="startQRDwnRunning1" @mouseup="stopQRDwnRunning1">
                                        <span>右下</span>
                                    </div>
                                </div>
                                <div id="right">
                                    <div class="circle-right" id="circle9" @click="startQLUpRunning"
                                        @mousedown="startQLUpRunning1" @mouseup="stopQLUpRunning1">
                                        <span>左上</span>
                                    </div>
                                    <div class="circle-right" id="circle8" @click="startQLeftRunning"
                                        @mousedown="startQLeftRunning1" @mouseup="stopQLeftRunning1">
                                        <span>左</span>
                                    </div>
                                    <div class="circle-right" id="circle7" @click="startQLDwnRunning"
                                        @mousedown="startQLDwnRunning1" @mouseup="stopQLDwnRunning1">
                                        <span>左下</span>
                                    </div>
                                    <div class="circle-right" id="circle6" @click="startQDwnRunning"
                                        @mousedown="startQDwnRunning1" @mouseup="stopQDwnRunning1">
                                        <span>下</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 变倍 -->
                        <div class="videobox3-3">
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="BbjClick" @mousedown="BbjClick1" @mouseup="onLongBbj1"><i
                                        class="el-icon-minus"></i></p>
                                <p>变倍</p>
                                <p class="btn2" @click="BbAddClick" @mousedown="BbAddClick1" @mouseup="onLongAdd1"><i
                                        class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startBjjRunning" @mousedown="startBjjRunning1"
                                    @mouseup="stopBjjRunning1"><i class="el-icon-minus"></i></p>
                                <p>变焦</p>
                                <p class="btn2" @click="startBjAddRunning" @mousedown="startBjAddRunning1"
                                    @mouseup="stopBjAddRunning1"><i class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startGqjRunning" @mousedown="startGqjRunning1"
                                    @mouseup="stopGqjRunning1"><i class="el-icon-minus"></i></p>
                                <p>光圈</p>
                                <p class="btn2" @click="startGqAddRunning" @mousedown="startGqAddRunning1"
                                    @mouseup="stopGqAddRunning1"><i class="el-icon-plus"></i></p>
                            </div>
                        </div>
                    </div>
                    <div class="videobox3-2" v-show="Hyt">
                        <!-- 八角云盘 -->
                        <div class="ptz">
                            <!-- /* 外圆环 */ -->
                            <div id="round"></div>
                            <!-- /* 黑色内圆环 */ -->
                            <div id="center_black"></div>
                            <div id="center_blue" @click="Hpicture">
                                <span>抓图</span>
                            </div>
                            <div id="circle0">
                                <div id="left">
                                    <div class="circle-left" id="circle2" @click="startHUpRunning"
                                        @mousedown="startHUpRunning1" @mouseup="stopHUpRunning1">
                                        <span>上</span>
                                    </div>
                                    <div class="circle-left" id="circle3" @click="startHRUpRunning"
                                        @mousedown="startHRUpRunning1" @mouseup="stopHRUpRunning1">
                                        <span>右上</span>
                                    </div>
                                    <div class="circle-left" id="circle4" @click="startHRighttRunning"
                                        @mousedown="startHRighttRunning1" @mouseup="stopHRightRunning1">
                                        <span>右</span>
                                    </div>
                                    <div class="circle-left" id="circle5" @click="startHRDwnRunning"
                                        @mousedown="startHRDwnRunning1" @mouseup="stopHRDwnRunning1">
                                        <span>右下</span>
                                    </div>
                                </div>
                                <div id="right">
                                    <div class="circle-right" id="circle9" @click="startHLUpRunning"
                                        @mousedown="startHLUpRunning1" @mouseup="stopHLUpRunning1">
                                        <span>左上</span>
                                    </div>
                                    <div class="circle-right" id="circle8" @click="startHLeftRunning"
                                        @mousedown="startHLeftRunning1" @mouseup="stopHLeftRunning1">
                                        <span>左</span>
                                    </div>
                                    <div class="circle-right" id="circle7" @click="startHLDwnRunning"
                                        @mousedown="startHLDwnRunning1" @mouseup="stopHLDwnRunning1">
                                        <span>左下</span>
                                    </div>
                                    <div class="circle-right" id="circle6" @click="startHDwnRunning"
                                        @mousedown="startHDwnRunning1" @mouseup="stopHDwnRunning1">
                                        <span>下</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 变倍 -->
                        <div class="videobox3-3">
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startHBbjRunning" @mousedown="startHBbjRunning1"
                                    @mouseup="stopHBbjRunning1"><i class="el-icon-minus"></i></p>
                                <p>变倍</p>
                                <p class="btn2" @click="startHBbAddRunning" @mousedown="startHBbAddRunning1"
                                    @mouseup="stopHBbAddRunning1"><i class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startHBjjRunning" @mousedown="startHBjjRunning1"
                                    @mouseup="stopHBjjRunning1"><i class="el-icon-minus"></i></p>
                                <p>变焦</p>
                                <p class="btn2" @click="startHBjAddRunning" @mousedown="startHBjAddRunning1"
                                    @mouseup="stopHBjAddRunning1"><i class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startHGqjRunning" @mousedown="startHGqjRunning1"
                                    @mouseup="stopHGqjRunning1"><i class="el-icon-minus"></i></p>
                                <p>光圈</p>
                                <p class="btn2" @click="startHGqAddRunning" @mousedown="startHGqAddRunning1"
                                    @mouseup="stopHGqAddRunning1"><i class="el-icon-plus"></i></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 吊舱摄像头 -->
            <div class="videoBox" v-show="this.camera_type == 2">
                <div class="videobox1">
                    <div class="box" :class="{ active: activeBox === 1 }" @click=" activeBox = 1; Qyt = true; Hyt = false">
                        <video v-show="videoShowQ" id="DCQvideo" class="video-js" style="width:100%;height:99%" controls
                            autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                            controlslist="nodownload"></video>
                    </div>
                    <div class="box" :class="{ active: activeBox === 2 }" @click=" activeBox = 2; Qyt = false; Hyt = true">
                        <video v-show="videoShowH" id="DCHvideo" class="video-js" style="width:100%;height:99%" controls
                            autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                            controlslist="nodownload"></video>
                    </div>
                </div>
                <div class="videobox2">
                    <div class="videobox2-1">
                        <p>音视频控制</p>
                        <span></span>
                    </div>
                    <div class="videobox2-2">
                        <div class="videobox2-2-1">
                            <el-dropdown>
                                <el-button disabled type="primary" size="min" style="width: 90px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                margin-bottom:5%;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                                    <!--                  {{ sxtjs }}-->不可用<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="前摄校时">前摄校时</el-dropdown-item>
                                    <el-dropdown-item command="后摄校时">后摄校时</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <el-dropdown>
                                <el-button disabled type="primary" size="min" style="width: 90px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                                    <!--                  {{ sxtcks }}-->不可用<i
                                        class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="2窗口">2窗口</el-dropdown-item>
                                    <el-dropdown-item command="1窗口">1窗口</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <div class="videobox2-2-3">
                            <el-button class="btn1" size="default" disabled>前像头水印</el-button>
                            <el-button disabled class="btn2" size="default">后像头水印</el-button>
                        </div>
                        <div class="videobox2-2-4">
                            <el-button class="btn" size="mini">前像头录像</el-button>
                            <el-button class="btn" size="mini">后像头录像</el-button>
                        </div>
                        <div class="videobox2-2-5">
                            <el-button class="btn" size="mini">前像头停止录制</el-button>
                            <el-button class="btn" size="mini">后像头停止录制</el-button>
                        </div>
                    </div>
                </div>
                <img src="../../components/images/line.png" alt="">
                <div class="videobox3">
                    <div class="videobox3-1">
                        <p>云台</p>
                        <span></span>
                    </div>
                    <div class="videobox3-2" v-show="Qyt">
                        <!-- 八角云盘 -->
                        <div class="ptz">
                            <!-- /* 外圆环 */ -->
                            <div id="round"></div>
                            <!-- /* 黑色内圆环 */ -->
                            <div id="center_black"></div>
                            <div id="center_blue" @click="DCQpicture">
                                <span>抓图</span>
                            </div>
                            <div id="circle0">
                                <div id="left">
                                    <div class="circle-left" id="circle2" @click="startQUp">
                                        <span>上</span>
                                    </div>
                                    <div class="circle-left" id="circle3" @click="startQRightUp">
                                        <span>右上</span>
                                    </div>
                                    <div class="circle-left" id="circle4" @click="startQRight">
                                        <span>右</span>
                                    </div>
                                    <div class="circle-left" id="circle5" @click="startQRightDow">
                                        <span>右下</span>
                                    </div>
                                </div>
                                <div id="right">
                                    <div class="circle-right" id="circle9" @click="startQLeftUp">
                                        <span>左上</span>
                                    </div>
                                    <div class="circle-right" id="circle8" @click="startQLeft">
                                        <span>左</span>
                                    </div>
                                    <div class="circle-right" id="circle7" @click="startQLeftDow">
                                        <span>左下</span>
                                    </div>
                                    <div class="circle-right" id="circle6" @click="startQDow">
                                        <span>下</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 变倍 -->
                        <div class="videobox3-3">
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="BbjClick" @mousedown="BbjClick1" @mouseup="onLongBbj1"><i
                                        class="el-icon-minus"></i></p>
                                <p>变倍</p>
                                <p class="btn2" @click="BbAddClick" @mousedown="BbAddClick1" @mouseup="onLongAdd1"><i
                                        class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startBjjRunning" @mousedown="startBjjRunning1"
                                    @mouseup="stopBjjRunning1"><i class="el-icon-minus"></i></p>
                                <p>变焦</p>
                                <p class="btn2" @click="startBjAddRunning" @mousedown="startBjAddRunning1"
                                    @mouseup="stopBjAddRunning1"><i class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startGqjRunning" @mousedown="startGqjRunning1"
                                    @mouseup="stopGqjRunning1"><i class="el-icon-minus"></i></p>
                                <p>光圈</p>
                                <p class="btn2" @click="startGqAddRunning" @mousedown="startGqAddRunning1"
                                    @mouseup="stopGqAddRunning1"><i class="el-icon-plus"></i></p>
                            </div>
                        </div>
                    </div>
                    <div class="videobox3-2" v-show="Hyt">
                        <!-- 八角云盘 -->
                        <div class="ptz">
                            <!-- /* 外圆环 */ -->
                            <div id="round"></div>
                            <!-- /* 黑色内圆环 */ -->
                            <div id="center_black"></div>
                            <div id="center_blue" @click="DCHpicture">
                                <span>抓图</span>
                            </div>
                            <div id="circle0">
                                <div id="left">
                                    <div class="circle-left" id="circle2" @click="startHUp">
                                        <span>上</span>
                                    </div>
                                    <div class="circle-left" id="circle3" @click="startHRightUp">
                                        <span>右上</span>
                                    </div>
                                    <div class="circle-left" id="circle4" @click="startHRight">
                                        <span>右</span>
                                    </div>
                                    <div class="circle-left" id="circle5" @click="startHRightDow">
                                        <span>右下</span>
                                    </div>
                                </div>
                                <div id="right">
                                    <div class="circle-right" id="circle9" @click="startHLeftUp">
                                        <span>左上</span>
                                    </div>
                                    <div class="circle-right" id="circle8" @click="startHLeft">
                                        <span>左</span>
                                    </div>
                                    <div class="circle-right" id="circle7" @click="startHLeftDow">
                                        <span>左下</span>
                                    </div>
                                    <div class="circle-right" id="circle6" @click="startHDow">
                                        <span>下</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 变倍 -->
                        <div class="videobox3-3">
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startDCHsx"><i class="el-icon-minus"></i></p>
                                <p>变倍</p>
                                <p class="btn2" @click="startDCHfd"><i class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1"><i class="el-icon-minus"></i></p>
                                <p>变焦</p>
                                <p class="btn2"><i class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1"><i class="el-icon-minus"></i></p>
                                <p>光圈</p>
                                <p class="btn2"><i class="el-icon-plus"></i></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 海康摄像头 -->
            <div class="videoBox" v-show="this.camera_type == 1">
                <div class="videobox1">
                    <div class="box" :class="{ active: activeBox === 1 }" @click=" activeBox = 1; Qyt = true; Hyt = false">
                        <video id="HKvideo" class="video-js" style="width:100%;height:99%" controls autoplay autobuffer
                            muted preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
                    </div>
                    <div class="box" :class="{ active: activeBox === 2 }" @click=" activeBox = 2; Qyt = false; Hyt = true">
                    </div>
                </div>
                <div class="videobox2">
                    <div class="videobox2-1">
                        <p>音视频控制</p>
                        <span></span>
                    </div>
                    <div class="videobox2-2">
                        <div class="videobox2-2-1">
                            <el-dropdown>
                                <el-button type="primary" size="min" style="width: 80px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                                    前后摄像头<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="前摄像头">前摄像头</el-dropdown-item>
                                    <el-dropdown-item command="后摄像头">后摄像头</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <p contenteditable="true" id="sy"></p>
                        </div>
                        <div class="videobox2-2-2">
                            <el-dropdown>
                                <el-button type="primary" size="min" style="width: 70px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                                    窗口<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="2窗口">2窗口</el-dropdown-item>
                                    <el-dropdown-item command="1窗口">1窗口</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                        </div>
                        <div class="videobox2-2-3">
                            <el-button class="btn1" size="default" @click="HKwatermark">摄像头水印</el-button>
                            <el-button class="btn2" size="default" @click="HKtiming">摄像头校时</el-button>
                        </div>
                        <div class="videobox2-2-4">
                            <el-button class="btn" size="mini">前像头录像</el-button>
                            <el-button class="btn" size="mini">后像头录像</el-button>
                        </div>
                        <div class="videobox2-2-5">
                            <el-button class="btn" @click="HKstartVideo" size="mini">摄像头开始录</el-button>
                            <el-button class="btn" @click="HKendVideo" size="mini">摄像头停止录</el-button>
                        </div>
                    </div>
                </div>
                <img src="../../components/images/line.png" alt="">
                <div class="videobox3">
                    <div class="videobox3-1">
                        <p>云台</p>
                        <span></span>
                    </div>
                    <div class="videobox3-2" v-show="Qyt">
                        <!-- 八角云盘 -->
                        <div class="ptz">
                            <!-- /* 外圆环 */ -->
                            <div id="round"></div>
                            <!-- /* 黑色内圆环 */ -->
                            <div id="center_black"></div>
                            <div id="center_blue" @click="HKpicture">
                                <span>抓图</span>
                            </div>
                            <div id="circle0">
                                <div id="left">
                                    <div class="circle-left" id="circle2" @click="startUp" @mousedown="startUp1"
                                        @mouseup="stopUp1">
                                        <span>上</span>
                                    </div>
                                    <div class="circle-left" id="circle3" @click="startUpRight" @mousedown="startUpRight1"
                                        @mouseup="stopUpRight1">
                                        <span>右上</span>
                                    </div>
                                    <div class="circle-left" id="circle4" @click="startRight" @mousedown="startRight1"
                                        @mouseup="stopRight1">
                                        <span>右</span>
                                    </div>
                                    <div class="circle-left" id="circle5" @click="startDownRight"
                                        @mousedown="startDownRight1" @mouseup="stopDownRight1">
                                        <span>右下</span>
                                    </div>
                                </div>
                                <div id="right">
                                    <div class="circle-right" id="circle9" @click="startUpLeft" @mousedown="startUpLeft1"
                                        @mouseup="stopUpLeft1">
                                        <span>左上</span>
                                    </div>
                                    <div class="circle-right" id="circle8" @click="startLeft" @mousedown="startLeft1"
                                        @mouseup="stopLeft1">
                                        <span>左</span>
                                    </div>
                                    <div class="circle-right" id="circle7" @click="startDownLeft"
                                        @mousedown="startDownLeft1" @mouseup="stopDownLeft1">
                                        <span>左下</span>
                                    </div>
                                    <div class="circle-right" id="circle6" @click="startDown" @mousedown="startDown1"
                                        @mouseup="stopDown1">
                                        <span>下</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 变倍 -->
                        <div class="videobox3-3">
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startBBminus" @mousedown="startBBminus1" @mouseup="stopBBminus1"><i
                                        class="el-icon-minus"></i></p>
                                <p>变倍</p>
                                <p class="btn2" @click="startBBplus" @mousedown="startBBplus1" @mouseup="stopBBplus1"><i
                                        class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startBJminus" @mousedown="startBJminus1" @mouseup="stopBJminus1"><i
                                        class="el-icon-minus"></i></p>
                                <p>变焦</p>
                                <p class="btn2" @click="startBJplus" @mousedown="startBJplus1" @mouseup="stopBJplus1"><i
                                        class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startGQminus" @mousedown="startGQminus1" @mouseup="stopGQminus1"><i
                                        class="el-icon-minus"></i></p>
                                <p>光圈</p>
                                <p class="btn2" @click="startGQplus" @mousedown="startGQplus1" @mouseup="stopGQplus1"><i
                                        class="el-icon-plus"></i></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import _ from 'lodash'
import * as echarts from "echarts";
import {listonPageRobotConfig} from "@/api/robot/robotconfig/robotconfig";
import {listsPlc} from "@/api/robot/plc/plc";
import $ from "jquery";
import {
  HendVideo,
  HfocusAdd,
  HfocusAdd1,
  HfocusAddEnd1,
  HfocusDec,
  HfocusDec1,
  HfocusDecEnd1,
  HirisAdd,
  HirisAdd1,
  HirisAddEnd1,
  HirisDec,
  HirisDec1,
  HirisDecEnd1,
  Hpicture,
  HptzDown,
  HptzDown1,
  HptzDownEnd1,
  HptzLeft,
  HptzLeft1,
  HptzLeftDown,
  HptzLeftDown1,
  HptzLeftDownEnd1,
  HptzLeftEnd1,
  HptzLeftUp,
  HptzLeftUp1,
  HptzLeftUpEnd1,
  HptzRight,
  HptzRight1,
  HptzRightDown,
  HptzRightDown1,
  HptzRightDownEnd1,
  HptzRightEnd1,
  HptzRightUp,
  HptzRightUp1,
  HptzRightUpEnd1,
  HptzUp,
  HptzUp1,
  HptzUpEnd1,
  HstartVideo,
  Htiming,
  Hwatermark,
  HzoomAdd,
  HzoomAdd1,
  HzoomAddEnd1,
  HzoomDec,
  HzoomDec1,
  HzoomDecEnd1,
  onLineStatus,
  QendVideo,
  QfocusAdd,
  QfocusAdd1,
  QfocusAddEnd1,
  QfocusDec,
  QfocusDec1,
  QfocusDecEnd1,
  QirisAdd,
  QirisAdd1,
  QirisAddEnd1,
  QirisDec,
  QirisDec1,
  QirisDecEnd1,
  Qpicture,
  QptzDown,
  QptzDown1,
  QptzDownEnd1,
  QptzLeft,
  QptzLeft1,
  QptzLeftDown,
  QptzLeftDown1,
  QptzLeftDownEnd1,
  QptzLeftEnd1,
  QptzLeftUp,
  QptzLeftUp1,
  QptzLeftUpEnd1,
  QptzRight,
  QptzRight1,
  QptzRightDown,
  QptzRightDown1,
  QptzRightDownEnd1,
  QptzRightEnd1,
  QptzRightUp,
  QptzRightUp1,
  QptzRightUpEnd1,
  QptzUp,
  QptzUp1,
  QptzUpEnd1,
  QstartVideo,
  Qtiming,
  Qwatermark,
  QzoomAdd,
  QzoomAdd1,
  QzoomAddEnd1,
  QzoomDec,
  QzoomDec1,
  QzoomDecEnd1
} from "@/api/robot/camera/cameraDH/video";
import {
  ddspCmd,
  fgCmd,
  htCmd,
  ippingCmd,
  isadminCmd,
  jqrdataCmd,
  jqrsdCmd,
  jqrsdzymsCmd,
  lxspCmd,
  mbwzCmd,
  msszCmd,
  qjCmd,
  robotrunCmd,
  robotstopCmd,
  sgCmd,
  xjsdCmd,
  yjfhCmd,
  zdqdCmd,
  zymshtCmd,
  zymsmsszCmd,
  zymsqjCmd,
  zymsrobotrunCmd
} from "@/api/robot/modbus/modbus";
import {
  DCHendVideo,
  DCHLeftDown,
  DCHLeftUp,
  DCHpicture,
  DCHptzDown,
  DCHptzLeft,
  DCHptzRight,
  DCHptzStop,
  DCHptzUp,
  DCHRightDown,
  DCHRightUp,
  DCHsmbPicture,
  DCHsmbVideo,
  DCHstartVideo,
  DCHzoomFocus,
  DCHzoomLess,
  DCHzoomStop,
  DCQendVideo,
  DCQLeftDown,
  DCQLeftUp,
  DCQpicture,
  DCQptzDown,
  DCQptzLeft,
  DCQptzRight,
  DCQptzStop,
  DCQptzUp,
  DCQRightDown,
  DCQRightUp,
  DCQsmbPicture,
  DCQsmbVideo,
  DCQstartVideo,
  DCQzoomFocus,
  DCQzoomLess,
  DCQzoomStop
} from "@/api/robot/camera/cameraDC/video";
import {
  HKendVideo,
  HKfocusAdd,
  HKfocusAdd1,
  HKfocusAddEnd1,
  HKfocusDec,
  HKfocusDec1,
  HKfocusDecEnd1,
  HKirisAdd,
  HKirisAdd1,
  HKirisAddEnd1,
  HKirisDec,
  HKirisDec1,
  HKirisDecEnd1,
  HKpicture,
  HKptzDown,
  HKptzDown1,
  HKptzDownEnd1,
  HKptzLeft,
  HKptzLeft1,
  HKptzLeftDown,
  HKptzLeftDown1,
  HKptzLeftDownEnd1,
  HKptzLeftEnd1,
  HKptzLeftUp,
  HKptzLeftUp1,
  HKptzLeftUpEnd1,
  HKptzRight,
  HKptzRight1,
  HKptzRightDown,
  HKptzRightDown1,
  HKptzRightDownEnd1,
  HKptzRightEnd1,
  HKptzRightUp,
  HKptzRightUp1,
  HKptzRightUpEnd1,
  HKptzUp,
  HKptzUp1,
  HKptzUpEnd1,
  HKstartVideo,
  HKtiming,
  HKwatermark,
  HKzoomAdd,
  HKzoomAdd1,
  HKzoomAddEnd1,
  HKzoomDec,
  HKzoomDec1,
  HKzoomDecEnd1
} from "@/api/robot/camera/hkvideo/video";

export default {
    data() {
        return {
            OnlineArry1: [],
            OnlineArry2: [],
            time: null,
            //时间戳
            mousedownTime: 0,
            mouseupTime: 0,
            //云台是否结束
            flag: true,
            //是否展示视频
            videoShowQ: false,
            videoShowH: false,
            timer: null,//定时器
            //切换不同的云台,默认显示大华
            camera_type: localStorage.getItem("camera_type") == "" ? 0 : localStorage.getItem("camera_type"),
            //切换不同云台
            Qyt: true,
            Hyt: false,
            //大华前摄像头服务
            webRtcServer: null,
            //大华后摄像头服务
            webRtcServer1: null,
            //设置下拉按钮初始显示内容
            sxtjs: '摄像校时',
            sxtcks: "2窗口",
            //点击视频窗口切换选中标识
            robot_name: undefined,
            activeBox: 1,  //标识被选中
            //控制点击救援增加的按钮
            showButtons: false,
            //控制模式板块的切换(表示默认显示第一个内容)
            selectedTab: 0,
            //控制机器人的滚动条
            isDologin: false,
            input: '',
            robot_name_title: undefined, //机器人名称标题
            sdmssdzd: 1000,//手动模式速度设定
            zdmssdzd: 1000,//自动模式速度设定
            zymssdzd: 1000,//自由模式速度设定
            xcwd: 0,//现场温度
            xcsd: 0,//现场湿度
            dcdy: 0,//电池电压
            jqrms: "无",//机器人模式
            jqrfx: "无",//机器人方向
            gswl: '无', //格栅设定数量
            jcgssl: '无',//检测格栅孔数量
            jqrsd: '无',//机器人速度设定
            sswy: "无",//实时位移
            dczt: '无',//电池状态
            queryParams: {
                robot_name: undefined //机器人名称
            }, queryParams1: {
                robot_config_id: undefined
            },queryParams2: {
                robotid: undefined
            },//查询参数
            queryparms3: {
                robotid: undefined,
                valu: undefined,
                robot_ip: undefined,
                robot_port: undefined,
                plcip: undefined,
                plcport: undefined,
                video_ip1: undefined,
                video_name1: undefined,
                video_pwd1: undefined,
                video_port1: undefined,
                residence_time: undefined,
                plcid: undefined,
                video_ip2: undefined,
                video_name2: undefined,
                video_pwd2: undefined,
                video_port2: undefined,
            }, //摄像头参数
            queryparms4: {
                valu: undefined,
                //camera_type:localStorage.getItem("camera_type"),
                video_ip1: localStorage.getItem("video_ip1"),
                video_name1: localStorage.getItem("video_name1"),
                video_pwd1: localStorage.getItem("video_pwd1"),
                video_port1: localStorage.getItem("video_port1"),
                residence_time: undefined,
                video_ip2: localStorage.getItem("video_ip2"),
                video_name2: localStorage.getItem("video_name2"),
                video_pwd2: localStorage.getItem("video_pwd2"),
                video_port2: localStorage.getItem("video_port2"),
                robot_config_id: localStorage.getItem("robot_config_id"),
            },
            //机器人列表
            robotList: [],
            //plc列表
            plcList: [],
            //online列表
            onlineList: [],
        }
    },
    created() {
        //初始化页面加载方法
        this.getList();//机器人列表
        this.getplcs();//机器人id查询plc列表
        this.getISadmin();//当前用户是否管理员
        this.echarts1(0);//电机转速
        this.echarts2(0);//电机温度
        this.echarts3(0);//电池电量
    },
    mounted() {
        //加载完页面加载方法
        //机器人标题
        $("#robotitle").text(localStorage.getItem("robot_name") == null ? "机器人" : localStorage.getItem("robot_name"));
        localStorage.getItem("robotype") === '1' ? this.showButtons = true : this.showButtons = false;//是否显示脱钩、放钩按钮
        //定时轮询执行
        this.timer = setInterval(() => {
            this.getList();//机器人列表
            this.getplcs();//根据机器人ID查询plc列表
            this.robotdata();//机器人实时数据
            console.log("机器人控制页面定时器")
        }, 1000);//1秒
        this.spbf(localStorage.getItem("camera_type")); //挂在完成后播放当前的监控视频 摄像头播放
        this.getQOnlie();//摄像头在线离线状态
    },
    methods: {
        spbf(camera_type) {
            //====大华摄像头======
            if (camera_type == 0) {
                ////大华前摄像头
                if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
                    //检测摄像头ip通不通
                    ippingCmd(localStorage.getItem("video_ip1")).then(response => {
                        if (typeof (response) != null && response.data != null && response.data == true) {
                            this.webRtcServer = new WebRtcStreamer('DHQvideo', location.protocol + '//127.0.0.1:8000')
                            this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/cam/realmonitor?channel=1&subtype=0')
                            this.videoShowQ = true
                        } else {
                            this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
                        }
                    });
                } else {
                    this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
                }//大华后摄像头
                if (localStorage.getItem("video_ip2") != null && localStorage.getItem("video_ip2") != "") {
                    //检测摄像头ip通不通
                    ippingCmd(localStorage.getItem("video_ip2")).then(response => {
                        if (typeof (response) != null && response.data != null && response.data == true) {
                            this.webRtcServer1 = new WebRtcStreamer('DHHvideo', location.protocol + '//127.0.0.1:8000')
                            this.webRtcServer1.connect('rtsp://' + localStorage.getItem("video_name2") + ':' + localStorage.getItem("video_pwd2") + '@' + localStorage.getItem("video_ip2") + ':' + 554 + '/cam/realmonitor?channel=1&subtype=0')
                            this.videoShowH = true
                        } else {
                            this.videoShowH = false
                        }
                    });
                } else {
                    this.videoShowH = false
                }
            } //=====吊舱前摄像头======
            else if (camera_type == 2) {
                //吊舱前摄像头
                if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
                    //检测摄像头ip通不通
                    ippingCmd(localStorage.getItem("video_ip1")).then(response => {
                        if (typeof (response) != null && response.data != null && response.data == true) {
                            this.webRtcServer = new WebRtcStreamer('DCQvideo', location.protocol + '//127.0.0.1:8000')
                            this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_ip1") + ':' + 554 + '/stream=0')
                            this.videoShowQ = true
                        } else {
                            this.videoShowQ = false//如果ip不存在则隐藏摄像头
                        }
                    });
                } else {
                    this.videoShowQ = false//如果ip不存在则隐藏摄像头
                } //吊舱后摄像头
                if (localStorage.getItem("video_ip2") != null && localStorage.getItem("video_ip2") != "") {
                    //检测摄像头ip通不通
                    ippingCmd(localStorage.getItem("video_ip2")).then(response => {
                        if (typeof (response) != null && response.data != null && response.data == true) {
                            this.webRtcServer1 = new WebRtcStreamer('DCHvideo', location.protocol + '//127.0.0.1:8000')
                            this.webRtcServer1.connect('rtsp://' + localStorage.getItem("video_ip2") + ':' + 554 + '/stream=0')
                            this.videoShowH = true
                        } else {
                            this.videoShowH = false
                        }
                    });
                } else {
                    this.videoShowH = false
                }
            }//=====海康摄像头======
            else if (camera_type == 1) {
                if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
                    //检测摄像头ip通不通
                    ippingCmd(localStorage.getItem("video_ip1")).then(response => {
                        if (typeof (response) != null && response.data != null && response.data == true) {
                            this.webRtcServer = new WebRtcStreamer('HKvideo', location.protocol + '//127.0.0.1:8000')
                            this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_ip1") + ':' + 554 + '/stream=0')
                            this.videoShowQ = true
                        } else {
                            this.videoShowQ = false//如果ip不存在则隐藏摄像头
                        }
                    });
                } else {
                    this.videoShowQ = false//如果ip不存在则隐藏摄像头
                }
            }
        },//当前用户是否管理员
        getISadmin() {
            isadminCmd().then(response => {
                if (typeof response.data != "undefined" && response.data != null) {
                    if (response.data == true) {
                        $("#zymsid").show();
                    } else {
                        $("#zymsid").hide();
                    }
                }
            });
        },//手动模式速度设定
        sdmslb(sdmssdzd) {
            this.sdmssdzd = sdmssdzd;
        },//自动模式速度设定
        zdmslb(zdmssdzd) {
            this.zdmssdzd = zdmssdzd;
        },//自由模式速度设定
        zymslb(zymssdzd) {
            this.zymssdzd = zymssdzd;
        },//摄像头设置
        sxtxz(sxtjs) {
            this.sxtjs = sxtjs;
        },//摄像头窗口
        sxtck(sxtcks) {
            this.sxtcks = sxtcks;
        },//获取当前机器人数据
        handleSelectionChange(row) {
            //摄像头相关
            if (this.webRtcServer != null) {
                this.webRtcServer.disconnect();
                this.webRtcServer = null
            }
            if (this.webRtcServer1 != null) {
                this.webRtcServer1.disconnect();
                this.webRtcServer1 = null
            }
            localStorage.removeItem("robot_config_id");//删除机器人id
            localStorage.removeItem("robot_name");//删除机器人名称
            localStorage.removeItem("video_ip1");//删除1摄像头ip
            localStorage.removeItem("video_port1");//删除1摄像头端口
            localStorage.removeItem("video_name1");//删除1摄像头账号
            localStorage.removeItem("video_pwd1");//删除1摄像头密码
            localStorage.removeItem("video_ip2");//删除2摄像头ip
            localStorage.removeItem("video_port2");//删除2摄像头端口号
            localStorage.removeItem("video_name2");//删除2摄像头账号
            localStorage.removeItem("video_pwd2");//删除2摄像头密码
            localStorage.removeItem("robotype");//删除机器人类型
            localStorage.removeItem("camera_type");//删除摄像头类型

            localStorage.setItem("video_ip1", row.video_ip1);//存储值
            localStorage.setItem("video_port1", row.video_port1);//存储值
            localStorage.setItem("video_name1", row.video_name1);//存储值
            localStorage.setItem("video_pwd1", row.video_pwd1);//存储值
            localStorage.setItem("video_ip2", row.video_ip2);//存储值
            localStorage.setItem("video_port2", row.video_port2);//存储值
            localStorage.setItem("video_name2", row.video_name2);//存储值
            localStorage.setItem("video_pwd2", row.video_pwd2);//存储值
            localStorage.setItem("robot_name", row.robot_name);//存储值
            localStorage.setItem("robot_config_id", row.id);//存储值
            localStorage.setItem("robotype", row.robot_type);//存储值
            localStorage.setItem("camera_type", row.camera_type);//存储摄像头类型

            //摄像头参数
            this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
            this.queryparms4.video_name1 = localStorage.getItem("video_name1");
            this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
            this.queryparms4.video_port1 = localStorage.getItem("video_port1");
            this.queryparms4.video_ip2 = localStorage.getItem("video_ip2");
            this.queryparms4.video_name2 = localStorage.getItem("video_name2");
            this.queryparms4.video_pwd2 = localStorage.getItem("video_pwd2");
            this.queryparms4.video_port2 = localStorage.getItem("video_port2");
            this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
            //将点击后存储的camera_type值赋值给data中的
            this.camera_type = localStorage.getItem("camera_type")
            //机器人名称标题
            $("#robotitle").text(localStorage.getItem("robot_name"));
            //是否显示脱钩、放钩按钮
            localStorage.getItem("robotype") === '1' ? this.showButtons = true : this.showButtons = false;
            this.getplcs();//根据机器人id查询plc列表
            this.spbf(localStorage.getItem("camera_type"));//摄像头视频播放
            this.getQOnlie(); //摄像头状态
        }, //获取摄像头在线或离线
        getQOnlie() {
            //====== 大华摄像头==========
            if (this.camera_type == 0) {
                if (localStorage.getItem("video_ip1") != null
                    && localStorage.getItem("video_ip1") != ""
                    && localStorage.getItem("video_ip2") != null
                    && localStorage.getItem("video_ip2") != ""
                    && localStorage.getItem("video_name1") != null
                    && localStorage.getItem("video_name1") != ""
                    && localStorage.getItem("video_name2") != null
                    && localStorage.getItem("video_name2") != ""
                    && localStorage.getItem("video_pwd1") != null
                    && localStorage.getItem("video_pwd1") != ""
                    && localStorage.getItem("video_pwd2") != null
                    && localStorage.getItem("video_pwd2") != ""
                    && localStorage.getItem("video_port1") != null
                    && localStorage.getItem("video_port1") != ""
                    && localStorage.getItem("video_port2") != null
                    && localStorage.getItem("video_port2") != ""
                ) {
                    this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
                    onLineStatus(this.queryparms4).then(response => {
                        this.OnlineArry1 = response.data[0];
                        this.OnlineArry2 = response.data[1];
                        this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
                        // this.onlineList = OnlineArry1.connect(OnlineArry2)
                        // this.onlineList.forEach((item) => {
                        //   this.onlineList = item
                        // });
                    });
                } else {
                    this.$modal.msg("大华摄像头账号为空")
                }
            } else {
                this.onlineList = null
            }
            //====== 吊舱摄像头==========
            if (this.camera_type == 2) {
                this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
                if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
                    onLineStatus(this.queryparms4).then(response => {
                        this.OnlineArry1 = response.data[0];
                        this.OnlineArry2 = response.data[1];
                        this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
                    });
                } else {
                    this.$modal.msg("吊舱摄像头账号为空")
                }
            } else {
                this.onlineList = null
            }
            //====== 海康摄像头==========
            if (this.camera_type == 1) {
                if (localStorage.getItem("video_ip1") != null
                    && localStorage.getItem("video_ip1") != ""
                    && localStorage.getItem("video_name1") != null
                    && localStorage.getItem("video_name1") != ""
                    && localStorage.getItem("video_pwd1") != null
                    && localStorage.getItem("video_pwd1") != ""
                    && localStorage.getItem("video_port1") != null
                    && localStorage.getItem("video_port1") != ""
                ) {
                    this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
                    onLineStatus(this.queryparms4).then(response => {
                        this.OnlineArry1 = response.data[0];
                        this.OnlineArry2 = response.data[1];
                        this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
                    });
                } else {
                    this.$modal.msg("海康摄像头账号为空")
                }
            } else {
                this.onlineList = null
            }
        },//根据机器人id查询plc列表
        getplcs() {
            this.queryParams1.robot_config_id = localStorage.getItem("robot_config_id");
            listsPlc(this.queryParams1).then(response => {
                this.plcList = response.rows;
            });
        },//根据输入框机器人名称，查询机器人列表
        getRobotName(robot_name) {
            this.queryParams.robot_name = robot_name;
            this.getList();
        },//查询机器人列表
        getList() {
            this.loading = true;
            listonPageRobotConfig(this.queryParams).then(response => {
                this.robotList = response.rows;
            });
        },//定时查询机器人数据
        robotdata() {
            this.queryParams2.robotid = localStorage.getItem("robot_config_id");
            jqrdataCmd(this.queryParams2).then(response => {
                if (typeof response.data != "undefined" && response.data != null) {
                    this.xcsd = response.data.xcsd + "%LEL";//现场湿度
                    this.xcwd = response.data.xcwd + "°C"; //现场温度
                    this.dcdy = response.data.dcdy + "V"; //电池电压
                    this.jqrms = response.data.jqrms; //机器人模式
                    this.jqrfx = response.data.jqrfx; //机器人方向
                    this.gswl = response.data.gswl;//格栅设定数量
                    this.jcgssl = response.data.jcgssl; //检测格栅孔数量
                    this.jqrsd = response.data.jqrsd + "r/min";//机器人速度设定
                    this.sswy = response.data.sswy + "m";//实时位移
                    this.dczt = response.data.dczt; //电池状态
                    this.echarts1(response.data.djzs);//电机转速
                    this.echarts2(response.data.djwd);//电机温度
                    this.echarts3(response.data.dcdl);//电池电量
                } else {
                    this.xcsd = "无";//现场湿度
                    this.xcwd = "无"; //现场温度
                    this.dcdy = "无"; //电池电压
                    this.jqrms = "无"; //机器人模式
                    this.jqrfx = "无"; //机器人方向
                    this.gswl = "无";//格栅设定数量
                    this.jcgssl = "无"; //检测格栅孔数量
                    this.jqrsd = "无";//机器人速度设定
                    this.sswy = "无";//实时位移
                    this.dczt = "无"; //电池状态
                    this.echarts1(0);//电机转速
                    this.echarts2(0);//电机温度
                    this.echarts3(0);//电池电量
                }
            });
        },
        ///////////////////////////机器人控制/////////////////////////////
        //机器人模式设置
        jqrmsF(jqrms) {
            this.queryparms3.valu = jqrms
            console.log("机器人模式设置" + this.queryparms3.valu);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                msszCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("机器人模式设置不能为空")
            }
        },//机器人自由模式设置
        jqrzymsF(jqrms) {
            this.queryparms3.valu = jqrms
            console.log("机器人模式设置" + this.queryparms3.valu);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                zymsmsszCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("机器人模式设置不能为空")
            }
        },//目标位置
        mbwz() {
            this.queryparms3.valu = $("#mbwzid").text();
            console.log("目标位置" + this.queryparms3.valu);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                mbwzCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("目标位置不能为空")
            }
        },//手动模式速度设置
        sdmsdsd() {
            this.queryparms3.valu = this.sdmssdzd;
            console.log("手动模式速度设置" + this.sdmssdzd);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                jqrsdCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("手动模式速度设置不能为空")
            }
        },//自动模式速度设置
        zdmsdsd() {
            this.queryparms3.valu = this.zdmssdzd;
            console.log("自动模式速度设置" + this.zdmssdzd);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                xjsdCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("自动模式速度设置不能为空")
            }
        },//自由模式速度设置
        zymsdsd() {
            this.queryparms3.valu = this.zymssdzd;
            console.log("自由模式速度设置" + this.zymssdzd);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                jqrsdzymsCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("自由模式速度设置不能为空")
            }
        },//手动模式前进
        sdmsqj() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            qjCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //手动模式后退
        sdmsht() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            htCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //手动模式(启动)
        sdmsqd() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            robotrunCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//自动模式(启动)
        zdmsqd() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            zdqdCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//自由模式(启动)
        zymsqd() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            zymsrobotrunCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//定点视频
        dd() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            ddspCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//连续视频
        lx() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            lxspCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //一键返航
        yjfh() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            yjfhCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//放钩
        fg() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            fgCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //收钩
        sg() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            sgCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//自由模式前进
        zymsqj() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            zymsqjCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //自由模式后退
        zymsht() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            zymshtCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //机器人暂停
        zt() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            robotstopCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//点击左侧第一个列表中的救援增加两个按钮
        handleJyClick() {
            this.showButtons = true
        },//点击左侧第一个列表中的普通隐藏两个按钮
        handlePtClick() {
            this.showButtons = false
        },
        /////////////////////大华摄像头////////////////////////
        //前-手动录像开始
        QstartVideo() {
            QstartVideo(this.queryparms4).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//前-手动停止录视频
        QendVideo() {
            QendVideo().then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //校时
        Qtiming() {
            Qtiming(this.queryparms4).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //水印
        Qwatermark() {
            this.queryparms4.valu = $("#sy").text();
            const value = this.queryparms4.valu
            if (value === '') {
                this.$modal.msg('摄像头水印不能为空')
            } else {
                Qwatermark(this.queryparms4).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            }

        },//前-上-点击
        startQUpRunning: _.throttle(function (event) {
            console.log("前向上点击事件")
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QptzUp(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //前-上-长按
        startQUpRunning1() {
            console.log("前向上长按事件")
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                QptzUp1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopQUpRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            //鼠标抬起结束向上
            QptzUpEnd1().then(response => {
                //this.$modal.msg(response.msg);
            })
        },
        //前----下
        startQDwnRunning: _.throttle(function (event) {
            console.log("前向下点击事件")
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QptzDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startQDwnRunning1() {
            console.log("前向下长按事件")
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                QptzDown1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopQDwnRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            //鼠标抬起结束向上
            QptzDownEnd1().then(response => {
                //this.$modal.msg(response.msg);
            })
        },
        //前----左
        startQLeftRunning: _.throttle(function (event) {
            console.log("前向左点击事件")
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QptzLeft(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startQLeftRunning1() {
            console.log("前向左长按事件")
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                QptzLeft1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopQLeftRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            QptzLeftEnd1().then(response => {
                //this.$modal.msg(response.msg);
            })
        },
        //前------向右
        startQRighttRunning: _.throttle(function (event) {
            console.log("前向右点击事件")
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QptzRight(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startQRighttRunning1() {
            console.log("前向右长按事件")
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                QptzRight1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopQRightRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            QptzRightEnd1().then(response => {
                //this.$modal.msg(response.msg);
            })
        },
        //前-拍照
        Qpicture() {
            Qpicture(this.queryparms4).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);

            });
        },
        //左上点击
        startQLUpRunning: _.throttle(function (event) {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                //云台向左上开始
                QptzLeftUp(this.queryparms4).then(response => {
                    if (typeof (response) != null) {
                        if (response.msg != null) {
                            this.$modal.msg(response.msg);
                        } else {

                        }
                    }
                });
            }
        }, 1000),
        //左上长按
        startQLUpRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                //云台向左上开始
                QptzLeftUp1(this.queryparms4).then(response => {
                    if (typeof (response) != null) {
                        //   if (typeof (response) != null) {
                        //
                        // }else{
                        //   this.$modal.msg(response.msg);
                        // }
                    }
                });
            }, 500)
        },
        stopQLUpRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            //鼠标抬起左上结束
            QptzLeftUpEnd1().then(response => {
                if (typeof (response) != null) {
                    //this.$modal.msg(response.msg);
                }
            });
        },
        //右上点击
        startQRUpRunning: _.throttle(function (event) {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                //云台向右上开始
                QptzRightUp(this.queryparms4).then(response => {
                    if (typeof (response) != null) {
                        if (response.msg != null) {
                            this.$modal.msg(response.msg);
                        } else {

                        }
                    }
                });
            }
        }, 1000),
        //右上长按
        startQRUpRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                //云台向右上开始
                QptzRightUp1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopQRUpRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            //鼠标抬起右上结束
            QptzRightUpEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //左下点击
        startQLDwnRunning: _.throttle(function (event) {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QptzLeftDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //左下长按开始
        startQLDwnRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                //云台向右上开始
                QptzLeftDown1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        //左下长按结束
        stopQLDwnRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            //鼠标抬起左下结束
            QptzLeftDownEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //右下点击
        startQRDwnRunning: _.throttle(function (event) {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QptzRightDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //右下长按开始
        startQRDwnRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                //云台向右上开始
                QptzRightDown1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        //右下长按结束
        stopQRDwnRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            //鼠标抬起右上结束
            QptzRightDownEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台变倍-
        BbjClick: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QzoomDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        BbjClick1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                QzoomDec1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        onLongBbj1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            QzoomDecEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台变倍+ 开始
        BbAddClick: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QzoomAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        BbAddClick1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                QzoomAdd1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        onLongAdd1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            QzoomAddEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台变焦+ 开始
        startBjAddRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QfocusAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startBjAddRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                QfocusAdd1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopBjAddRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            QfocusAddEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台变焦- 开始
        startBjjRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QfocusDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startBjjRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                QfocusDec1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopBjjRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            QfocusDecEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台光圈+ 开始
        startGqAddRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QirisAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startGqAddRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                QirisAdd1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopGqAddRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            QirisAddEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台光圈-开始
        startGqjRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                QirisDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startGqjRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                QirisDec1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopGqjRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            QirisDecEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        /////大华后摄像头////
        //校时
        Htiming() {
            Htiming(this.queryparms4).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//水印
        Hwatermark() {
            this.queryparms4.valu = $("#sy").text();
            const value = this.queryparms4.valu
            if (value === '') {
                this.$modal.msg('摄像头水印不能为空')
            } else {
                Hwatermark(this.queryparms4).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            }
        },//手动录像开始
        HstartVideo() {
            HstartVideo(this.queryparms4).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//手动录像停止
        HendVideo() {
            HendVideo().then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//拍照
        Hpicture() {
            Hpicture(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        },
        //云台向上开始
        startHUpRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HptzUp(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHUpRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HptzUp1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHUpRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HptzUpEnd1().then(response => {
                // if (typeof (response) == null) {
                //   // this.$modal.msg(response.msg);
                // }
            });
        },
        //云台向下开始
        startHDwnRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HptzDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHDwnRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HptzDown1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHDwnRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HptzDownEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台向左开始
        startHLeftRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HptzLeft(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHLeftRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HptzLeft1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHLeftRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HptzLeftEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台向右开始
        startHRighttRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HptzRight(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHRighttRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HptzRight1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHRightRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HptzRightEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台向左上开始
        startHLUpRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HptzLeftUp(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHLUpRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HptzLeftUp1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHLUpRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HptzLeftUpEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台向右上开始
        startHRUpRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HptzRightUp(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHRUpRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HptzRightUp1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHRUpRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HptzRightUpEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台向左下开始
        startHLDwnRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HptzLeftDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHLDwnRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HptzLeftDown1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHLDwnRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HptzLeftDownEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台向右下开始
        startHRDwnRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HptzRightDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHRDwnRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HptzRightDown1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHRDwnRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HptzRightDownEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台变倍+ 开始
        startHBbAddRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HzoomAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHBbAddRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HzoomAdd1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHBbAddRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HzoomAddEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台变倍- 开始
        startHBbjRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HzoomDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHBbjRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HzoomDec1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHBbjRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HzoomDecEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台变焦+ 开始
        startHBjAddRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HfocusAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHBjAddRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HfocusAdd1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHBjAddRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HfocusAddEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台变焦- 开始
        startHBjjRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HfocusDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHBjjRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HfocusDec1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHBjjRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HfocusDecEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台光圈+ 开始
        startHGqAddRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HirisAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHGqAddRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HirisAdd1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHGqAddRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HirisAddEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },
        //云台光圈-开始
        startHGqjRunning: _.throttle(function () {
            if (this.mouseupTime - this.mousedownTime < 1050) {
                HirisDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        startHGqjRunning1() {
            this.mousedownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HirisDec1(this.queryparms4).then(response => {
                    //   if (typeof (response) != null) {
                    //
                    // }else{
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopHGqjRunning1() {
            this.mouseupTime = new Date().getTime()
            clearInterval(this.timer)
            HirisDecEnd1().then(response => {
                // if (typeof (response) != null) {
                //   this.$modal.msg(response.msg);
                // }
            });
        },



        ////////////////////吊舱摄像头/////////////////////
        //吊舱前摄像头
        //前-电子放大
        DCQzoomFocus() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQzoomFocus(q_video_ip).then(response => {
            });
        },
        //前-电子缩小
        DCQzoomLess() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQzoomLess(q_video_ip).then(response => {
            });
        },//前-电子停止
        DCQzoomStop() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQzoomStop(q_video_ip).then(response => {
            });
        },//电子缩小
        startDCsx() {
            this.DCQzoomLess()
            console.log('缩小开始')
        }, //电子放大
        startDCfd() {
            this.DCQzoomFocus()
            console.log('放大开始')
        },
        stopDCsxOrfd() {
            this.DCQzoomStop()
            console.log('缩小或放大停止')
        },//前-向上
        DCQptzUp() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQptzUp(q_video_ip).then(response => {
            });
        }, //前-向下
        DCQptzDown() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQptzDown(q_video_ip).then(response => {
            });
        }, //前-向左
        DCQptzLeft() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQptzLeft(q_video_ip).then(response => {
            });
        }, //前-向右
        DCQptzRight() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQptzRight(q_video_ip).then(response => {
            });
        },//前-云台停止
        DCQptzStop() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQptzStop(q_video_ip).then(response => {
            });
        }, //前-左上
        DCQLeftUp() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQLeftUp(q_video_ip).then(response => {
            });
        }, //前-左下
        DCQLeftDown() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQLeftDown(q_video_ip).then(response => {
            });
        },//前-右上
        DCQRightUp() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQRightUp(q_video_ip).then(response => {
            });
        }, //前-右下
        DCQRightDown() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQRightDown(q_video_ip).then(response => {
            });
        },//向上
        startQUp() {
            this.DCQptzUp()
        }, //右上
        startQRightUp() {
            this.DCQRightUp()
        },//右
        startQRight() {
            this.DCQptzRight()
        }, //右下
        startQRightDow() {
            this.DCQRightDown()
        },//下
        startQDow() {
            this.DCQptzDown()
        },//左下
        startQLeftDow() {
            this.DCQLeftDown()
        },//左
        startQLeft() {
            this.DCQptzLeft()
        },//左上
        startQLeftUp() {
            this.DCQLeftUp()
        },//所有方向停止
        stopQYt() {
            this.DCQptzStop()
        },
        // 前-手动录视频--开始
        DCQstartVideo() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQstartVideo(q_video_ip).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        }, // 前-手动录视频--停止
        DCQendVideo() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQendVideo(q_video_ip).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                    this.DCQsmbVideo(q_video_ip);
                }
            });
        },
        //拍照
        DCQpicture() {
            const q_video_ip = localStorage.getItem("video_ip1");
            DCQpicture(q_video_ip).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                    this.DCQsmbPicture(q_video_ip);
                }
            });
        },// 前-同步视频文件
        DCQsmbVideo(q_video_ip) {
            // const q_video_ip= localStorage.getItem("video_ip1");
            DCQsmbVideo(q_video_ip).then(response => {
            });
        }, // 前-同步照片文件
        DCQsmbPicture(q_video_ip) {
            // const q_video_ip= localStorage.getItem("video_ip1");
            DCQsmbPicture(q_video_ip).then(response => {
            });
        },
        ///////吊舱后摄像头//////
        //后-电子放大
        DCHzoomFocus() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHzoomFocus(h_video_ip).then(response => {
            });
        }, //后-电子缩小
        DCHzoomLess() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHzoomLess(h_video_ip).then(response => {
            });
        }, //后-电子停止
        DCHzoomStop() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHzoomStop(h_video_ip).then(response => {
            });
        }, //电子缩小
        startDCHsx() {
            this.DCHzoomLess()
            console.log('缩小开始')
        },//电子放大
        startDCHfd() {
            this.DCHzoomFocus()
            console.log('放大开始')
        },
        stopDCHsxOrfd() {
            this.DCHzoomStop()
            console.log('缩小或放大停止')
        }, //后-向上
        DCHptzUp() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHptzUp(h_video_ip).then(response => {
            });
        }, //后-向下
        DCHptzDown() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHptzDown(h_video_ip).then(response => {
            });
        },//后-向左
        DCHptzLeft() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHptzLeft(h_video_ip).then(response => {
            });
        },//后-向右
        DCHptzRight() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHptzRight(h_video_ip).then(response => {
            });
        }, //后-云台停止
        DCHptzStop() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHptzStop(h_video_ip).then(response => {
            });
        },//后-左上
        DCHLeftUp() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHLeftUp(h_video_ip).then(response => {
            });
        }, //后-左下
        DCHLeftDown() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHLeftDown(h_video_ip).then(response => {
            });
        }, //后-右上
        DCHRightUp() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHRightUp(h_video_ip).then(response => {
            });
        }, //后-右下
        DCHRightDown() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHRightDown(h_video_ip).then(response => {
            });
        },
        //向上
        startHUp() {
            this.DCHptzUp()
        },//右上
        startHRightUp() {
            this.DCHRightUp()
        }, //右
        startHRight() {
            this.DCHptzRight()
        }, //右下
        startHRightDow() {
            this.DCHRightDown()
        },//下
        startHDow() {
            this.DCHptzDown()
        },//左下
        startHLeftDow() {
            this.DCHLeftDown()
        }, //左
        startHLeft() {
            this.DCHptzLeft()
        }, //左上
        startHLeftUp() {
            this.DCHLeftUp()
        },//所有方向停止
        stopHYt() {
            this.DCHptzStop()
        }, //后-手动录视频--开始
        DCHstartVideo() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHstartVideo(h_video_ip).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        }, // 后-手动录视频--停止
        DCHendVideo() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHendVideo(h_video_ip).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                    this.DCHsmbVideo(h_video_ip);
                }
            });
        },//拍照
        DCHpicture() {
            const h_video_ip = localStorage.getItem("video_ip2");
            DCHpicture(h_video_ip).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                    this.DCHsmbPicture(h_video_ip);
                }
            });
        }, // 后-同步视频文件
        DCHsmbVideo(h_video_ip) {
            // const h_video_ip= localStorage.getItem("video_ip2");
            DCHsmbVideo(h_video_ip).then(response => {
            });
        }, // 后-同步照片文件
        DCHsmbPicture(h_video_ip) {
            // const h_video_ip= localStorage.getItem("video_ip2");
            DCHsmbPicture(h_video_ip).then(response => {
            });
        },


        ///////////////////海康摄像头/////////////////////
        //校时
        HKtiming() {
            HKtiming(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        },
        //水印
        HKwatermark() {
            HKwatermark(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        },
        //手动录像开始
        HKstartVideo() {
            HKstartVideo(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        },
        //手动录像停止
        HKendVideo() {
            HKendVideo().then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        },
        //拍照
        HKpicture() {
            HKpicture(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        },
        //云台向上点击
        startUp: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzUp(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台向上----长按
        startUp1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzUp1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopUp1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzUpEnd1().then(response => {
                // if (typeof (response) != null) {
                //   // this.$modal.msg(response.msg);
                // }
            });
        },
        //云台向下点击
        startDown: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台向下----长按
        startDown1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzDown1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopDown1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzDownEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向左点击
        startLeft: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzLeft(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台向左----长按
        startLeft1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzLeft1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopLeft1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzLeftEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向右点击
        startRight: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzRight(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台向右----长按
        startRight1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzRight1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopRight1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzRightEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向左上点击
        startUpLeft: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzLeftUp(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台向左上----长按
        startUpLeft1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzLeftUp1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopUpLeft1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzLeftUpEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向右上点击
        startUpRight: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzRightUp(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {
                    }
                });
            }
        }, 1000),
        //云台向右上----长按
        startUpRight1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzRightUp1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopUpRight1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzRightUpEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向左下点击
        startDownLeft: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzLeftDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台向左下----长按
        startDownLeft1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzLeftDown1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopDownLeft1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzLeftDownEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向右下点击
        startDownRight: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzRightDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台向右下----长按
        startDownRight1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzRightDown1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopDownRight1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzRightDownEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台变倍+点击
        startBBplus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKzoomAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台变倍+  --  长按
        startBBplus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKzoomAdd1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopBBplus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKzoomAddEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台变倍-点击
        startBBminus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKzoomDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台变倍-  --  长按
        startBBminus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKzoomDec1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopBBminus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKzoomDecEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台变焦+点击
        startBJplus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKfocusAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台变焦+  --  长按
        startBJplus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKfocusAdd1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopBJplus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKfocusAddEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台变焦-点击
        startBJminus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKfocusDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台变焦-  --  长按
        startBJminus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKfocusDec1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopBJminus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKfocusDecEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台光圈+ 点击
        startGQplus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKirisAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台光圈+ --  长按
        startGQplus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKirisAdd1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopGQplus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKirisAddEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台光圈- 点击
        startGQminus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKirisDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }
        }, 1000),
        //云台光圈- --  长按
        startGQminus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKirisDec1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopGQminus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKirisDecEnd1().then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //电机转速
        echarts1(djzs) {
            setTimeout(() => {
                let myCharts = echarts.init(document.getElementById("gauges"));
                myCharts.setOption(
                    {
                        series: [
                            {
                                radius: "100%",
                                center: ['50%', '50%'],
                                type: 'gauge',
                                axisLine: {
                                    lineStyle: {
                                        width: 20,
                                        color: [
                                            [0.3, '#3e78f5'],
                                            [0.7, '#9a54eb'],
                                            [1, '#f37886']
                                        ]
                                    }
                                },
                                pointer: {
                                    width: 6,
                                    itemStyle: {
                                        color: '#3e78f5'
                                    }
                                },
                                axisTick: {
                                    distance: -20,
                                    length: 11,
                                    lineStyle: {
                                        color: '#fff',
                                        width: 1
                                    }
                                },
                                splitLine: {
                                    distance: -20,
                                    length: 20,
                                    lineStyle: {
                                        color: '#fff',
                                        width: 2
                                    }
                                },
                                axisLabel: {
                                    color: '#fff',
                                    distance: 9,
                                    fontSize: 6
                                },
                                detail: {
                                    // width:60,
                                    // height:60,
                                    fontSize: 10,
                                    valueAnimation: true,
                                    formatter: '{value} r/min',
                                    color: '#fff'
                                },
                                data: [
                                    {
                                        value: djzs,
                                        name: '电机转速',
                                    }
                                ],
                                title: {
                                    show: true,
                                    fontSize: 10,
                                    offsetCenter: ["0", "10%"],
                                    color: '#fff'
                                },
                                max: 5000,
                                min: 0
                            }
                        ]
                    }
                );
                window.addEventListener("resize", () => {
                    myCharts.resize();
                })
            }, 1);
        }, //电机温度
        echarts2(djwd) {
            setTimeout(() => {
                let myCharts2 = echarts.init(document.getElementById("gauges2"));
                myCharts2.setOption(
                    {
                        series: [
                            {
                                radius: "70%",
                                center: ['50%', '50%'],
                                type: 'gauge',
                                splitNumber: 9,
                                axisLine: {
                                    lineStyle: {
                                        width: 14,
                                        color: [
                                            [1, '#ddebf6'],
                                        ]
                                    }
                                },
                                pointer: {
                                    show: false,
                                    width: 5,
                                    // itemStyle: {
                                    //   color: '#3e78f5'
                                    // }
                                },
                                axisTick: {
                                    // show:false,
                                    distance: -13,
                                    length: 10,
                                    lineStyle: {
                                        color: '#a9a9a9',
                                        width: 1
                                    }
                                },
                                splitLine: {
                                    distance: -10,
                                    length: 14,
                                    lineStyle: {
                                        color: '#a9a9a9',
                                        width: 2
                                    }
                                },
                                axisLabel: {
                                    color: '#fff',
                                    distance: -29,
                                    fontSize: 7
                                },
                                detail: {
                                    // width:60,
                                    // height:60,
                                    fontSize: 10,
                                    valueAnimation: true,
                                    formatter: '{value}(°C)',
                                    color: '#daa666'
                                },
                                data: [
                                    {
                                        value: djwd,
                                        name: '电机温度',
                                    }
                                ],
                                title: {
                                    show: true,
                                    offsetCenter: ["0", "-20%"],
                                    color: '#daa666',
                                    fontSize: 10
                                },
                                max: 360,
                                min: 0
                            }
                        ]
                    }
                );
                window.addEventListener("resize", () => {
                    myCharts2.resize();
                })
            }, 1);
        },//电池电量
        echarts3(dcdl) {
            setTimeout(() => {
                let myCharts3 = echarts.init(document.getElementById("gauges3"));
                myCharts3.setOption(
                    {
                        series: [{
                            name: "电量",
                            type: "gauge",
                            clockwise: true,
                            data: [{
                                value: dcdl,
                                name: "电池电量",
                            }],
                            radius: "100%",
                            // 仪表盘半径
                            // startAngle: 208,
                            // endAngle: -28,
                            min: 0,
                            max: 100,
                            splitNumber: 10,
                            center: ["50%",
                                "50%"],
                            axisLabel: {
                                // 大刻度标签。
                                show: true,
                                distance: 10,
                                color: "white",
                                fontSize: 8,
                                formatter: "{value}",
                            },
                            splitLine: {
                                length: 10,
                                // 分隔线长度
                                lineStyle: {
                                    width: 2,
                                    color: '#ffffff'
                                }
                            },
                            axisLine: {
                                // 仪表盘轴线(轮廓线)相关配置。
                                show: true,
                                lineStyle: {
                                    // 仪表盘轴线样式。
                                    opacity: 1,
                                    width: 14,
                                    // 表盘宽度
                                    shadowBlur: 10,
                                    color: [// 仪表盘轴线颜色
                                        [1,
                                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                                offset: 0,
                                                color: "#00e4f0"
                                            },
                                            {
                                                offset: 0.3,
                                                color: "#00e4f0"
                                            },
                                            {
                                                offset: 1,
                                                color: "#00e4f0"
                                            }])
                                        ]
                                    ]
                                },
                            },
                            axisTick: {
                                // 小刻度相关
                                splitNumber: 5,
                                // 小刻度个数
                                show: true
                            },
                            detail: {
                                // 仪表盘详情数据相关
                                color: "#5ab1ef",
                                fontSize: 10,
                                formatter: "{value}%",
                                offsetCenter: [0,
                                    '20']
                            },
                            title: {
                                show: true,
                                offsetCenter: ["0", "-18%"],
                                color: '#b6cbea',
                                fontSize: 10
                            },
                            itemStyle: {
                                // 指针样式
                                color: "#fff"
                            },
                            pointer: {
                                // 仪表盘指针。
                                show: true,
                                length: "70%",
                                width: 6,
                            },
                        },
                        ],
                    }
                );
                window.addEventListener("resize", () => {
                    myCharts3.resize();
                })
            }, 1);
        }
    },
    beforeDestroy() {
        //清除定时器
        if (this.timer) {
            clearInterval(this.timer); //关闭
        }
        if (this.webRtcServer != null) this.webRtcServer.disconnect()
        //this.webRtcServer = null
        if (this.webRtcServer1 != null) this.webRtcServer1.disconnect()
        //this.webRtcServer1 = null
    },
    enter() {
        this.isDologin = true;
    },
    leave() {
        this.isDologin = false;
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    width: 100%;
    height: calc(100vh - 35px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #081a46;
    //padding-left:0;
}

* {
    margin: 0;
    //padding: 0;
}

.el-button+.el-button {
    margin-left: 0px;
}

//左边
.left {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .put {
        width: 98%;
        margin: 10px;

        ::v-deep .el-input {
            width: 100%;
            height: 20px;
        }

        ::v-deep .el-input__inner {
            border: 2px solid #0264bf;
            background-color: #081a46;
            // margin: 10px;
        }
    }

    .table {
        width: 98%;
        height: 200px;
        margin: 10px;
        // margin-top: 20px;
        overflow: auto;

        ::v-deep .el-table__body-wrapper {
            &::-webkit-scrollbar {
                // 整个滚动条
                width: 0px; // 纵向滚动条的宽度
                background: rgba(71, 103, 182, 0.3);
                border: none;
            }

            &::-webkit-scrollbar-track {
                // 滚动条轨道
                border: none;
            }
        }

        .el-table {
            width: 100%;
        }

        ::v-deep .el-table th.gutter {
            display: none;
            width: 0
        }

        ::v-deep .el-table colgroup col[name='gutter'] {
            display: none;
            width: 0;
        }

        // ::deep .el-table::before {
        //     height: 0px;
        // }

        ::v-deep .el-table__body {
            width: 100%;
            // padding-left: 10px;
        }

        ::v-deep .el-table__body-wrapper {
            width: 100%;
            background-color: #081a46;

        }

        /*滚动条的宽度*/
        .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: none;
            width: 0;
        }

        .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: block;
            width: 0;
        }

        // ::v-deep .el-table .cell{
        //     padding: 0;
        // }
        //::v-deep .el-table,
        // ::v-deep .el-table__expanded-cell {
        //     background-color: transparent;
        // }
        ::v-deep .el-table tr {
            background-color: #081a46;
            border: none;
            // height: 50px;
            width: 100%;
        }

        ::v-deep .el-table td {
            background-color: #081a46;
            border: none;
            width: 100%;
            // height: 50px;
        }

        // /* 表格内背景颜色 */
        ::v-deep .el-table th {
            //background-color:#081a46;
            border: none;
            width: 100%;
        }

        // 移入变色
        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #222448;
        }
    }

    ::v-deep.el-progress-bar__inner {
        background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
        // background-image: linear-gradient(90deg,#252799 100%,#2887b3 50% #27c9de 0%);  // 给进度条加上渐变色
        // background: linear-gradient(to right, #252799, #2887b3, #27c9de 70px);
        // background: linear-gradient(to right, red, blue 70px);
        // stroke-linecap:butt
    }

    .table::-webkit-scrollbar {
        display: none;
        /*隐藏滚动条*/
    }

    .table-bottom {
        width: 98%;
        height: 170px;
        margin: 10px;
        // margin-top: 20px;
        overflow: auto;

        ::v-deep .el-table__body-wrapper {
            &::-webkit-scrollbar {
                // 整个滚动条
                width: 0px; // 纵向滚动条的宽度
                background: rgba(71, 103, 182, 0.3);
                border: none;
            }

            &::-webkit-scrollbar-track {
                // 滚动条轨道
                border: none;
            }
        }

        .el-table {
            width: 100%;

        }

        ::v-deep .el-table th.gutter {
            display: none;
            width: 0
        }

        ::v-deep .el-table colgroup col[name='gutter'] {
            display: none;
            width: 0;
        }

        // ::deep .el-table::before {
        //     height: 0px;
        // }

        ::v-deep .el-table__body {
            width: 100%;
            // padding-left: 10px;
            background-color: #081a46;

        }

        ::v-deep .el-table__body-wrapper {
            width: 100%;
            background-color: #081a46;
        }

        /*滚动条的宽度*/
        .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: none;
            width: 0;
        }

        .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: block;
            width: 0;
        }

        // ::v-deep .el-table .cell{
        //     padding: 0;
        // }
        //::v-deep .el-table,
        // ::v-deep .el-table__expanded-cell {
        //     background-color: transparent;
        // }
        ::v-deep .el-table tr {
            // background-color: transparent;
            background-color: #081a46;
            border: none;
            // height: 50px;
            width: 100%;
        }

        ::v-deep .el-table td {
            background-color: #081a46;
            //background-color: trannt;
            border: none;
            width: 100%;
            // height: 50px;
        }

        // /* 表格内背景颜色 */
        ::v-deep .el-table th {
            background-color: transparent;
            border: none;
            width: 100%;
        }

        // 移入变色
        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #222448;
        }
    }
}

//中间
.video-center {
    width: 36%;
    height: 100%;
    margin-left: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #081a46;

    .center-header {
        width: 98%;
        height: 65px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid #2A2E4A;
        border-top: none;
        border-radius: 0px 0px 4px 4px;
        margin-bottom: 8px;

        p {
            width: 148px;
            height: 35px;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #E9E9E9;
        }
    }

    .center-box1 {
        width: 98%;
        height: 60%;
        background: #081a46;
        border: 1px solid #2A2E4A;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .Speed-dial {
            width: 100%;
            height: 45%;
            display: flex;
            justify-content: space-between;
            //background-color: #00FF00;
        }

        .right-mode1 {
            width: 80%;
            height: 15%;
            //margin-bottom: 1%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            // background-color: #0264bf;

            .mode-box {
                width: 60px;
                height: 40px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                :nth-child(1) {
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                    margin-bottom: 1%;
                }

                :nth-child(2) {
                    width: 60px;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 2px solid #54619D;
                    border-radius: 10px;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #75bfff;
                }

            }
        }

        .right-mode2 {
            width: 80%;
            height: 15%;
            //margin-bottom: 1%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            //background-color: #3eecf5;

            .mode-box {
                width: 60px;
                height: 40px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                :nth-child(1) {
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                    margin-bottom: 1%;
                }

                :nth-child(2) {
                    width: 60px;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 2px solid #54619D;
                    border-radius: 10px;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #75bfff;
                }

            }
        }

        .Mode-selection {
            width: 98%;
            height: 6%;
            display: flex;
            justify-content: center;
            align-items: center;
            //background-color: #75bfff;
            //margin-bottom: 4px;
            //margin-left: 7px;

            p {
                width: 96px;
                height: 24px;
                font-size: 15px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
            }
        }

        .Operation-button {
            width: 80%;
            height: 20%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-left: 7px;
            margin-bottom: 2%;

            .Operation-buttonBox {
                width: 60px;
                height: 60px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                :nth-child(1) {
                    width: 25px;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(68deg, #3040F4, #3F79F4);
                    margin-bottom: 5px;
                    border-width: 0px
                }

                :nth-child(2) {
                    width: 60px;
                    height: 16px;
                    text-align: center;
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                }
            }
        }
    }

    //手动模式
    .center-box2-1 {
        width: 98%;
        height: 40%;
        background: #081a46;
        border: 1px solid #2A2E4A;
        border-top: none;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .right-bottomTitle {
            width: 98%;
            height: 10%;
            margin-top: 2px;
            //background-color: #ebb42a;
            //margin-bottom: 2px;

            >p {
                width: 95px;
                height: 20px;
                font-size: 15px;
                margin-left: 2%;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
            }

            span {
                display: block;
                width: 52px;
                height: 2px;
                margin-left: 2.5%;
                background: #4691FF;
            }
        }

        .right-bottomBox {
            width: 98%;
            height: 85%;
            //background-color: #00FF00;

            .right-bottomBox1 {
                width: 100%;
                height: 50%;
               /// background-color: #54619D;

                .right-bottomBox1-1 {
                    width: 100%;
                    height: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    //background-color: #2ec7a1;
                    >p {
                        width: 80px;
                        height: 25px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #0F1A43;
                        border: 2px solid #54619D;
                        border-radius: 10px;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;
                    }

                    span {
                        display: block;
                        margin-top: 1%;
                        width: 8px;
                        height: 8px;
                        margin-left: 0.5%;
                        margin-bottom: 10px;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;
                    }

                    .btn {
                        width: 80px;
                        height: 25px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;
                        margin-left: 30px;
                    }
                }

                .right-bottomBox1-2 {
                    width: 100%;
                    height: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    span {
                        display: block;
                        // margin-top: 1%;
                        width: 8px;
                        height: 8px;
                        // margin-left: 0.5%;
                        //margin-bottom: 10px;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;
                    }

                    .btn {
                        width: 80px;
                        height: 25px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;
                        margin-left: 30px;
                    }
                }
            }

            .right-bottomBox1-3 {
                width: 100%;
                height: 25%;
                display: flex;
                align-items: center;
                justify-content: center;

                //background-color: #75bfff;
                .right-bottomBox1-3-1 {
                    width: 60%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    //background-color: #f391f3;
                    .btn1 {
                        width: 50px;
                        height: 25px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #0D817A);
                        border: 2px solid #2ec7a1;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;
                        margin-right: 48px;
                    }

                    .btn2 {
                        width: 50px;
                        height: 25px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #337F17);
                        border: 2px solid #3CA813;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;
                    }
                }

            }

            .right-bottomBox1-4 {
                width: 100%;
                height: 25%;
                display: flex;
                align-items: center;
                justify-content: center;

                //background-color: #df971a;
                .right-bottomBox1-4-1 {
                    width: 45%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    //background-color: #21df1a;
                    .btn1 {
                        width: 50px;
                        height: 25px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;
                    }

                    .btn2 {
                        width: 50px;
                        height: 25px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #065D70);
                        border: 2px solid #108B8F;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;
                        //margin-left: 10px;
                    }

                    .btn3 {
                        width: 50px;
                        height: 25px;
                        //margin-left: 10px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;
                    }
                }
            }
        }

    }

    //自动模式
    .center-box2-2 {
        width: 98%;
        height: 40%;
        background: #081a46;
        border: 1px solid #2A2E4A;
        border-top: none;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .right-bottomTitle {
            width: 98%;
            height: 20%;
            margin-top: 1%;

            //background-color: #00FF00;
            >p {
                width: 95px;
                height: 26px;
                font-size: 15px;
                margin-left: 2%;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
            }

            span {
                display: block;
                width: 52px;
                height: 2px;
                margin-left: 2.5%;
                background: #4691FF;
            }
        }

        .right-bottomBox1 {
            width: 50%;
            height: 30%;
            margin-left: 2%;
            // background-color: #108B8F;
            display: flex;
            align-items: flex-end;
            justify-content: center;

            >span {
                display: block;
                //margin-top: 5px;
                margin-left: 4px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
            }

            .btn {
                width: 80px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: linear-gradient(0deg, #0D1538, #1B2D67);
                border: 2px solid #2B5B9B;
                border-radius: 4px;
                font-size: 12px;
                margin-left: 8px;
                font-family: Bahnschrift;
                font-weight: 400;
                color: #C1C1C1;
            }
        }

        .right-bottomBox2 {
            width: 50%;
            height: 40%;
            //background-color: #2B5B9B;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;

            .btn1 {
                width: 50px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: linear-gradient(0deg, #0D1538, #1B2D67);
                border: 2px solid #2B5B9B;
                border-radius: 4px;
                font-size: 12px;
                //margin-left: 8px;
                font-family: Bahnschrift;
                font-weight: 400;
                color: #C1C1C1;
            }

            .btn2 {
                width: 50px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: linear-gradient(0deg, #0D1538, #065D70);
                border: 2px solid #108B8F;
                border-radius: 4px;
                font-size: 12px;
                //margin-left: 8px;
                font-family: Bahnschrift;
                font-weight: 400;
                color: #C1C1C1;
            }

            .btn3 {
                width: 50px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: linear-gradient(0deg, #0D1538, #337F17);
                border: 2px solid #3CA813;
                border-radius: 4px;
                font-size: 12px;
                //margin-left: 8px;
                font-family: Bahnschrift;
                font-weight: 400;
                color: #C1C1C1;
            }
        }
    }

    //一键返航
    .center-box2-3 {
        width: 98%;
        height: 40%;
        background: #081a46;
        border: 1px solid #2A2E4A;
        border-top: none;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .right-bottomTitle {
            width: 98%;
            height: 15%;
            margin-top: 1%;

            //background-color: #00FF00;
            >p {
                width: 95px;
                height: 20px;
                font-size: 15px;
                margin-left: 2%;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
            }

            span {
                display: block;
                width: 52px;
                height: 2px;
                margin-left: 2.5%;
                background: #4691FF;
            }
        }

        .right-bottomBox {
            width: 98%;
            height: 85%;

            //background-color: #108B8F;
            .right-bottomBox1 {
                width: 100%;
                height: 40%;
                display: flex;
                justify-content: center;
                align-items: center;
                //background-color: #1b60e1;
                .btn1 {
                    width: 50px;
                    height: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #0D817A);
                    border: 2px solid #2ec7a1;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }

                .btn2 {
                    width: 50px;
                    height: 20px;
                    margin-left: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #337F17);
                    border: 2px solid #3CA813;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }
            }

            .right-bottomBox2 {
                width: 100%;
                height: 40%;
                display: flex;
                justify-content: center;
                align-items: center;
                //background-color: #75bfff;
                .btn {
                    width: 50px;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #1B2D67);
                    border: 2px solid #2B5B9B;
                    border-radius: 4px;
                    font-size: 12px;
                    //margin-left: 8px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }
            }
        }

    }

    //自由模式
    .center-box2-4 {
        width: 98%;
        height: 40%;
        background: #081a46;
        border: 1px solid #2A2E4A;
        border-top: none;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .right-bottomTitle {
            width: 98%;
            height: 15%;
           // background-color: #00FF00;
            >p {
                width: 95px;
                height: 20px;
                font-size: 15px;
                margin-left: 2%;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
            }

            span {
                display: block;
                width: 52px;
                height: 2px;
                margin-left: 2.5%;
                background: #4691FF;
            }
        }

        .right-bottomBox {
            width: 98%;
            height: 85%;
            //background-color: #2ec7a1;
            .right-bottomBox1 {
                width: 100%;
                height: 30%;
                display: flex;
                justify-content: center;
                align-items: center;
                //background-color: hotpink;
                >span {
                    display: block;
                    //margin-top: 5px;
                    margin-left: 4px;
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                }

                .btn {
                    width: 80px;
                    height: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #1B2D67);
                    border: 2px solid #2B5B9B;
                    border-radius: 4px;
                    font-size: 12px;
                    margin-left: 8px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }
            }

            .right-bottomBox2 {
                width: 100%;
                height: 28%;
                display: flex;
                justify-content: center;
                align-items: center;
                //background-color: #bfd612;
                .btn1 {
                    width: 50px;
                    height: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #0D817A);
                    border: 2px solid #2ec7a1;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }

                .btn2 {
                    width: 50px;
                    height: 20px;
                    margin-left: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #337F17);
                    border: 2px solid #3CA813;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }
            }

            .right-bottomBox3 {
                width: 100%;
                height: 28%;
                display: flex;
                align-items: center;
                justify-content: center;
                //background-color: #fd90f8;
                .btn1 {
                    width: 50px;
                    height: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #1B2D67);
                    border: 2px solid #2B5B9B;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }

                .btn2 {
                    width: 50px;
                    height: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #065D70);
                    border: 2px solid #108B8F;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                    margin-left: 30px;
                    margin-right: 30px;
                }

                .btn3 {
                    width: 50px;
                    height: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #4C0820, #0D1538);
                    border: 2px solid #942028;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }
            }
        }
    }
}


//右边
.video-right {
    width: 47%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .right-header {
        width: 98%;
        height: 65px;
        margin-bottom: 8px;
        border: 1px solid #2A2E4A;
        border-top: none;
        border-radius: 0px 0px 4px 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #081a46;

        p {
            width: 148px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #E9E9E9;
        }
    }

    .videoBox {
        width: 98%;
        height: calc(100vh - 98px);
        display: flex;
        flex-direction: column;
        //justify-content: center;
        align-items: center;
        border: 1px solid #2A2E4A;
        border-radius: 4px;
        background: #081a46;

        .videobox1 {
            width: 99.9%;
            height: 50%;
            display: flex;
            margin-bottom: 4px;

            .box {
                width: 50%;
                height: 100% !important;
                /*新增高度 2023-5-6*/
                display: flex;
                justify-content: center;
                align-items: center;
                background: #000000;
                border: 1px solid #2A2E4A;
                background-image: url(../../components/images/jiankong.png);
                background-repeat: no-repeat;
                background-position: center center;
                //隐藏video播放按钮
                /*.video::-webkit-media-controls-play-button{*/
                /*  display: none !important;*/
                /*}*/

            }

            .video-js {
                background-color: rgb(1 5 43);
                object-fit: fill;
                //隐藏video播放按钮
            }

            video {
                pointer-events: none;
            }

            //隐藏video播放按钮
            video::-webkit-media-controls-play-button {
                display: none !important;
            }

            //隐藏video音量进度条
            video::-webkit-media-controls-volume-slider {
                display: none !important;
            }

            //隐藏video音量按钮
            video::-webkit-media-controls-mute-button {
                display: none !important;
            }

            video::-webkit-media-controls-toggle-closed-captions-button {
                display: none !important;
            }

            //隐藏当前时间
            video::-webkit-media-controls-current-time-display {
                display: none !important;
            }

            //隐藏剩余时间
            video::-webkit-media-controls-time-remaining-display {
                display: none !important;
            }

            //隐藏进度条
            video::-webkit-media-controls-timeline {
                display: none !important;
            }

            //更多选项
            video::-internal-media-controls-overflow-button {
                display: none !important;
            }

            .active {
                border: 1px solid #00FF00;
            }
        }

        .videobox2 {
            width: 99%;
            height: 15%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 3%;

            .videobox2-1 {
                width: 98%;
                height: 20%;
                margin-bottom: 2%;

                p {
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #EDEDED;
                    margin-left: 2%;
                }

                span {
                    display: block;
                    margin-left: 3.5%;
                    width: 62px;
                    height: 2px;
                    background: #4691FF;
                }
            }

            .videobox2-2 {
                width: 98%;
                height: 80%;
                display: flex;
                justify-content: center;

                .videobox2-2-1 {
                    width: 20%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    >P {
                        width: 90px;
                        height: 25px;
                        margin-top: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: #0F1A43;
                        border: 2px solid #54619D;
                        border-radius: 10px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #C1C1C1;
                    }
                }

                .videobox2-2-3 {
                    width: 20%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .btn1 {
                        width: 70px;
                        height: 25px;
                        margin-top: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 8px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        margin-bottom: 5%;
                    }

                    .btn2 {
                        width: 70px;
                        height: 25px;
                        // margin-top: 27%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                    }
                }

                .videobox2-2-4 {
                    width: 20%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .btn {
                        width: 70px;
                        height: 25px;
                        margin-top: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                    }

                    btn:nth-child(2) {
                        margin-left: -0.5%;
                    }
                }

                .videobox2-2-5 {
                    width: 20%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .btn {
                        width: 90px;
                        height: 25px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #673B1B);
                        border: 2px solid #9B6D2B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                    }

                    :nth-child(2) {
                        margin-top: 5%;
                    }
                }

            }
        }

        .videobox3 {
            width: 98%;
            height: 28%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 2%;
            //background-color: #00FF00;

            .videobox3-1 {
                width: 98%;
                height: 10%;

                p {
                    font-size: 16px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #EDEDED;
                    margin-left: 2%;
                }

                span {
                    display: block;
                    margin-left: 3%;
                    width: 20px;
                    height: 2px;
                    background: #4691FF;
                }
            }

            .videobox3-2 {
                width: 98%;
                height: 90%;
                display: flex;
                align-items: center;
                justify-content: space-around;
                //margin-top: 1%;
                //background-color: #0051ff;

                .ptz {
                    position: relative;
                    width: 264px;
                    /* padding: 10px; */
                    height: 180px;
                    //background-color: aquamarine;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .circle-left {
                    width: 73px;
                    height: 146px;
                    /* border: 1px solid #fff; */
                    border-radius: 0px 73px 73px 0px;
                    position: absolute;
                    right: 0;
                    transform-origin: 0 50%;
                }

                .circle-right {
                    width: 73px;
                    height: 146px;
                    /* border: 1px solid #fff; */
                    border-radius: 73px 0px 0px 73px;
                    position: absolute;
                    right: 0;
                    transform-origin: 100% 50%;
                }

                /* 八等份分割线 */
                #Canvas {
                    position: absolute;
                    z-index: 1;
                    pointer-events: none;
                    left: 87px;
                    top: 27px;
                    transform: rotate(-22.5deg);
                }

                /* 外圆环 */
                #round {
                    width: 160px;
                    height: 160px;
                    background-color: #081a46;
                    border-radius: 50%;
                    position: absolute;
                    left: 80px;
                    top: 10px;
                    z-index: 0;
                }

                /* 黑色内圆环 */
                #center_black {
                    width: 74px;
                    height: 74px;
                    background-color: #081a46;
                    border-radius: 50%;
                    position: absolute;
                    left: 123px;
                    top: 53px;
                    z-index: 1;
                }

                /* 中心蓝色圆环 */
                #center_blue {
                    width: 60px;
                    height: 60px;
                    text-align: center;
                    background: linear-gradient(68deg, #3040F4, #3F79F4);
                    border-radius: 50%;
                    position: absolute;
                    left: 130px;
                    top: 60px;
                    z-index: 2;
                }

                #center_blue span {
                    position: absolute;
                    left: 17px;
                    top: 22px;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                /* 圆八等份 */
                #circle0 {
                    width: 146px;
                    height: 146px;
                    border-radius: 73px;
                    top: 0px;
                    background-color: #0f2140;
                    position: absolute;
                    left: 87px;
                    top: 17px;
                    z-index: 0;
                    pointer-events: auto;
                    transform: rotate(-22.5deg);
                }

                #left {
                    /* 用矩形切割半圆 */
                    clip: rect(0px 73px 146px 0px);
                    position: absolute;
                    right: 0px;
                    width: 73px;
                    height: 146px;
                    overflow: hidden;
                    border-left: 2px solid #011137;
                }

                #right {
                    clip: rect(0px 78px 146px 0px);
                    position: absolute;
                    left: 0px;
                    width: 73px;
                    height: 146px;
                    overflow: hidden;
                    //border-right: 2px solid #011137;
                }

                #circle2:hover,
                #circle3:hover,
                #circle4:hover,
                #circle5:hover,
                #circle6:hover,
                #circle7:hover,
                #circle8:hover,
                #circle9:hover,
                #center_blue:hover {
                    cursor: pointer;
                }

                #circle2 {
                    background-color: #0a2056;
                    //border-left: 2px solid #011137;
                }

                #circle2 span {
                    position: absolute;
                    left: 14px;
                    top: 15px;
                    transform: rotate(22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle3 {
                    background-color: #0a2056;
                    transform: rotate(45deg);
                    border-left: 2px solid #011137;
                }

                #circle3 span {
                    position: absolute;
                    left: 10px;
                    top: 15px;
                    transform: rotate(22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle4 {
                    background-color: #0a2056;
                    transform: rotate(90deg);
                    border-left: 2px solid #011137;
                }

                #circle4 span {
                    position: absolute;
                    left: 15px;
                    top: 15px;
                    transform: rotate(22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle5 {
                    background-color: #0a2056;
                    transform: rotate(135deg);
                    border-left: 2px solid #011137;
                }

                #circle5 span {
                    position: absolute;
                    left: 12px;
                    top: 15px;
                    transform: rotate(22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle6 {
                    background-color:#0a2056;
                    transform: rotate(225deg);
                    border-right: 2px solid #011137;
                }

                #circle6 span {
                    position: absolute;
                    right: 14px;
                    top: 15px;
                    transform: rotate(-22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle7 {
                    background-color: #0a2056;
                    transform: rotate(270deg);
                    border-right: 2px solid #011137;
                }

                #circle7 span {
                    position: absolute;
                    right: 10px;
                    top: 15px;
                    transform: rotate(-22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle8 {
                    background-color:#0a2056;
                    transform: rotate(315deg);
                    border-right: 2px solid #011137;
                }

                #circle8 span {
                    position: absolute;
                    right: 15px;
                    top: 15px;
                    transform: rotate(-22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle9 {
                    background-color:#0a2056;
                    transform: rotate(360deg);
                }

                #circle9 span {
                    position: absolute;
                    right: 10px;
                    top: 15px;
                    transform: rotate(-22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                .videobox3-3 {
                    width: 30%;
                    height: 80%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-top: 1%;
                    // margin-left: -20%;
                    justify-content: space-around;

                    // background-color: #00FF00;
                    .videobox3-3-1 {
                        width: 90%;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;

                        .btn1 {
                            width: 32px;
                            height: 32px;
                            background: linear-gradient(68deg, #3040F4, #3F79F4);
                            border-radius: 50%;
                            border: none;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 12px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #EDEDED;
                            cursor: pointer;
                            margin-bottom: 4px;
                        }

                        p {
                            width: 26px;
                            height: 18px;
                            font-size: 12px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #EDEDED;
                            margin-bottom: 4px;
                        }

                        .btn2 {
                            width: 32px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 32px;
                            background: linear-gradient(68deg, #3040F4, #3F79F4);
                            border-radius: 50%;
                            border: none;
                            font-size: 12px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #EDEDED;
                            cursor: pointer;
                            margin-bottom: 4px;
                        }
                    }
                }
            }
        }
    }
}</style>
